Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: How to use svg icons in web content
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:
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:
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
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
Francesco Cardinalecrossposted. Don't do that, please
I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator).
Olaf KockOk, sorry.Francesco Cardinalecrossposted. Don't do that, please
I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator).
But why does the 'use' tag disappear when I save?
How can I solve the problem?
Thanks
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.
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.
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.
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.
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.
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
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
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