ICONS - How to handle SVG explained

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
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.
User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin » Wed Mar 29, 2017 7:03 pm

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.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty » Thu Mar 30, 2017 2:04 am

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.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin » Thu Mar 30, 2017 2:11 am

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

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty » Fri Apr 14, 2017 5:23 pm

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:

Code: Select all

$('.icon').addClass('fa');
$('body').append('<script src="//cdn.simplesvg.com/js/?plugins=fa"></script>')
and all icons on page will be replaced by SVG from SimpleSVG framework. See how it works compared to font.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin » Fri Apr 14, 2017 8:27 pm

hmm slight issue with the dropdown arrows...

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty » Fri Apr 14, 2017 9:56 pm

hanakin wrote:
Fri Apr 14, 2017 8:27 pm
hmm slight issue with the dropdown arrows...
It is caused by this in buttons.css

Code: Select all

.caret i {
	vertical-align: top;
}
Adding .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;
}
Or remove alignment completely. Issue with that icon is its below middle of text, so centering it vertically requires some hack, for both font and svg. Instead of messing with alignment you can move it. This solution should work for both <i> and <svg>

Code: Select all

.caret i, .caret svg { position: relative; top: -3px; }
Or replace it with icon that does not require messing with alignment:

Code: Select all

<span data-icon="vaadin-caret-down" class="simple-svg" data-width="1.2em" data-height="1em"></span>
width/height can be moved to css
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

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 790
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin » Fri Apr 14, 2017 10:04 pm

thats what i figured just was not sure

Post Reply