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
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

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.
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

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
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

hmm slight issue with the dropdown arrows...
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

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.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

thats what i figured just was not sure
Donations welcome via Paypal Image

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: ICONS - How to handle SVG explained

Post by Arty »

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.

User avatar
Vinny
Style Customisations
Style Customisations
Posts: 129
Joined: Thu May 20, 2010 4:01 am
Location: Brazil
Contact:

Re: ICONS - How to handle SVG explained

Post by Vinny »

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.
It seems interesting, great job.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: ICONS - How to handle SVG explained

Post by hanakin »

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?
Donations welcome via Paypal Image

Post Reply