How to use svg icons in web content

RE: How to use svg icons in web content

2019-02-18T14:51:53Z

ok, I solved.

The problem is not the editor nor liferay.

The problem is that if I compile and build the bootstrap theme, in /dist dir (of bootstrap theme) I have the sprite.svg, while in /src (of bootstrap theme) I have the individual icons.
I loaded the individual icons.
Instead, if I load the sprite.svg in /src/images/svg (of liferay theme), then everything is ok. Also from web content.

Thank you all.
Francesco

RE: How to use svg icons in web content

2019-02-18T14:15:29Z

Patrick YeoHey Francesco,

The reason the use tag is disappearing is because of svg4everybody. The path to your svg sprite is wrong in the context of a Web Content portlet. Svg4everybody tries to find the svg sprite relative to the path specified and can't find it so it returns nothing.

You need to find the proper path to the theme's images directory. It looks like we have access to the themeDisplay object in a Web Content in 7.1. You can create a specific template and structure for SVG icons and pass in the partial path and icon name. You can then reuse it in your other Web Content structure and templates.
<svg class="icon">
    <use xlink:href="${themeDisplay.getPathThemeImages()}/svg/sprite.svg#icona1"></use>
</svg>
Unfortunately, I can't figure out a reliable way to use it with Basic Web Content. If you want to use Basic Web content I suggest directly inlining the SVG at this point.

Hi Patrick,
The full path of my svg icon is:
localhost:8080/o/theme-name/images/svg/icon1.svg

If I paste this path in the browser, I see the icon. If I enter the path in the web content I do not see the icon:

<svg class="icon">
    <use data-href="/o/theme-name/images/svg/icon1.svg"></use>
</svg>

I tried with data-href because I noticed that if I use a lexicon icon, even from the web content, I see it:

<svg class="icon">
   <use data-href="/o/theme-name/images/lexicon/icons.svg#times"></use>
</svg>

Why?

Thanks.
Francesco

RE: How to use svg icons in web content

2019-02-11T20:55:21Z

Hey Francesco,

The reason the use tag is disappearing is because of svg4everybody. The path to your svg sprite is wrong in the context of a Web Content portlet. Svg4everybody tries to find the svg sprite relative to the path specified and can't find it so it returns nothing.

You need to find the proper path to the theme's images directory. It looks like we have access to the themeDisplay object in a Web Content in 7.1. You can create a specific template and structure for SVG icons and pass in the partial path and icon name. You can then reuse it in your other Web Content structure and templates.

<svg class="icon">
    <use xlink:href="${themeDisplay.getPathThemeImages()}/svg/sprite.svg#icona1"></use>
</svg>

Unfortunately, I can't figure out a reliable way to use it with Basic Web Content. If you want to use Basic Web content I suggest directly inlining the SVG at this point.

RE: How to use svg icons in web content

2019-02-11T19:23:21Z

Answered on Stackoverflow.

I'll also add, These are WYSIWYG Editors, not HTML editors. Source really shouldn't be edited manually. Source View is only there for convenience.

If you want explicit markup, use a Web Content Structure.

RE: How to use svg icons in web content

2019-02-08T14:42:23Z

Olaf Kock
Francesco Cardinale

I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator).
crossposted. Don't do that, please

Ok, sorry.
But why does the 'use' tag disappear when I save?

How can I solve the problem?
Thanks

RE: How to use svg icons in web content

2019-02-08T06:00:07Z

Francesco Cardinale

I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator).

crossposted. Don't do that, please

How to use svg icons in web content

2019-02-07T09:40:59Z

Hello,

I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator).

I added a directory images (in / src), containing a svg directory which in turn contains (a sprite) svg icons.

In a web content, I would like to invoke these svg icons, for example with the HTML statement:

<svg class="icon">
   <use xlink:href="./images/svg/sprite.svg#icona1"></use>
</svg>

I tried different path (href). The main problem is that as soon as I save the web content, Liferay automatically translates the previous code into:

<svg class="icon">
</svg>

Therefore, the part relative to the path ('use' tag) is deleted.

Why?
What should I do to include svg icons in a web content?

Thank you
Francesco