ICONS - How to handle SVG explained
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.
If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.
If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
Re: ICONS - How to handle SVG explained
its an issue with svgs as well as it depends on weather they are designed to the center of the viewbox vs the bottom of the viewbox ... fa is designed at the bottom vs mdi which is designed to the center.
Re: ICONS - How to handle SVG explained
Of course.
When using FA it happens very often that icon needs custom alignment. Same will be with SVG. That is why framework doesn't assume anything and shows icons as is... with exception of colors and width/height values. It is a minor issue of old icons that are designed to be handled as fonts.
But these fonts are moving forward too. FontAwesome 4 is designed to be used as font, FontAwesome 5 is done properly as collection of SVG without extra spacing below icon for text alignment.
When using FA it happens very often that icon needs custom alignment. Same will be with SVG. That is why framework doesn't assume anything and shows icons as is... with exception of colors and width/height values. It is a minor issue of old icons that are designed to be handled as fonts.
But these fonts are moving forward too. FontAwesome 4 is designed to be used as font, FontAwesome 5 is done properly as collection of SVG without extra spacing below icon for text alignment.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: ICONS - How to handle SVG explained
right just was wondering as most icon frameworks are very self serving and make up there own rules...they never play very well with each other
Re: ICONS - How to handle SVG explained
I've improved script a lot since last post:
- Images imported from fonts are now cropped by up to same amount that is displayed below baseline, so images no longer have extra spacing. Images that go below baseline will not have part of them cut out.
- Component for searching icons is available: https://simplesvg.com/test/search.html
It is still in testing, but it seems to work fine. There are 2 samples on that page: one that searches all collections, one restricted to Emoji One collection. Component is flexible and customizable. It can be used to allow users to insert custom icons, such as custom forum icons or (as shown in sample) emoji selection.
- When dimensions aren't specified or height is set to 1em, icons imported from fonts are adjusted to inline mode. Vertical-align is set to baseline setting from font, so glyph goes slightly below baseline, just like if it was rendered as font.
Test it on this very forum. Write these 2 lines of code in browser console:
and all icons on page will be replaced by SVG from SimpleSVG framework. See how it works compared to font.
- Images imported from fonts are now cropped by up to same amount that is displayed below baseline, so images no longer have extra spacing. Images that go below baseline will not have part of them cut out.
- Component for searching icons is available: https://simplesvg.com/test/search.html
It is still in testing, but it seems to work fine. There are 2 samples on that page: one that searches all collections, one restricted to Emoji One collection. Component is flexible and customizable. It can be used to allow users to insert custom icons, such as custom forum icons or (as shown in sample) emoji selection.
- When dimensions aren't specified or height is set to 1em, icons imported from fonts are adjusted to inline mode. Vertical-align is set to baseline setting from font, so glyph goes slightly below baseline, just like if it was rendered as font.
Test it on this very forum. Write these 2 lines of code in browser console:
Code: Select all
$('.icon').addClass('fa');
$('body').append('<script src="//cdn.simplesvg.com/js/?plugins=fa"></script>')
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: ICONS - How to handle SVG explained
hmm slight issue with the dropdown arrows...
Re: ICONS - How to handle SVG explained
It is caused by this in buttons.css
Code: Select all
.caret i {
vertical-align: top;
}
.caret svg
to it won't do much because <svg> element has vertical-align in style, so to customize vertical alignment of such icons you need to add !important:Code: Select all
.caret i, .caret svg {
vertical-align: top !important;
}
Code: Select all
.caret i, .caret svg { position: relative; top: -3px; }
Code: Select all
<span data-icon="vaadin-caret-down" class="simple-svg" data-width="1.2em" data-height="1em"></span>
Last edited by Arty on Fri Apr 14, 2017 10:06 pm, edited 1 time in total.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: ICONS - How to handle SVG explained
thats what i figured just was not sure
Re: ICONS - How to handle SVG explained
SVG framework has been improved a lot in last few months.
Check it out: https://simplesvg.com/
Website has icon finder to browse all available icons and documentation, though documentation section is not complete yet.
Many bugs have been fixed, many improvements to code.
Check it out: https://simplesvg.com/
Website has icon finder to browse all available icons and documentation, though documentation section is not complete yet.
Many bugs have been fixed, many improvements to code.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: ICONS - How to handle SVG explained
It seems interesting, great job.Arty wrote: ↑Wed Jan 31, 2018 8:16 pm SVG framework has been improved a lot in last few months.
Check it out: https://simplesvg.com/
Website has icon finder to browse all available icons and documentation, though documentation section is not complete yet.
Many bugs have been fixed, many improvements to code.
Re: ICONS - How to handle SVG explained
Is it cacheable? Though if I have a page with 100 + icons that has to go through this every load I’m wondering the cost?