ICONS - How to handle SVG explained

[hanakin]

There are several options and ways to handle svg but it can get very complicated as there are reasons to use more than one method.

Further more some of the methods require re-formating the code.

We should also be ensuring that all the svgs are standardizes and properly optimized https://www.google.com/url?sa=t&rct=j&q ... pBPUOpjx7w

to simplify things I recommend a build step this way all the svgs can be included in the repo as a normal img would be. (There will still need to be some guidelines). This at least gives us a similar structure we are used to.

The build step would insure inclusion would all work the same way and remove all http requests.

How it would all work
The images folder would contain a new folder called icons

This folder would then have sub folders for each unique image set for example

Code: Select all

images/
	icons/
		buttons/
			new.svg
			forward.svg
			lock.svg
			...
		contact/
		post/

each of these sub folders would contain all the svg icons for that icon subset.

The build step which I will explain in more detail later would essentially create an "svg definitons(sprite)" file with the same name as the folder.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" class="social-icons" style="position: absolute; width: 0; height: 0;">
 	<symbol id="contact-menu" viewBox="0 0 24 24">
 		<path fill-rule="evenodd" d="M6 22v-4H4c-1.103 0-2-.897-2-2V4c0-1.104.897-2 2-2h16c1.103 0 2 .896 2 2v12c0 1.103-.897 2-2 2h-8.667L6 22zM4 4h16v12h-9.333L8 18v-2H4V4zm3 7.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z"/>
 	</symbol>
 	<symbol id="phpbb_facebook" viewBox="0 0 24 24">
 		<path fill="#3B5999" fill-rule="evenodd" d="M22 5.333A3.335 3.335 0 0 0 18.667 2H5.333A3.335 3.335 0 0 0 2 5.333v13.334A3.335 3.335 0 0 0 5.333 22h6.654v-6.66L10 15.333V12l1.993.007L12 9.333c0-1.04.747-2.666 2.667-2.666h.253c3.1 0 3.047.006 3.047.006v3.334H15.94s-.64.006-.64.666v1.334L17.333 12v3.333h-2V22h3.334A3.335 3.335 0 0 0 22 18.667V5.333z"/>
 	</symbol>
 </svg>

These would then be included into the template header just after the body tag.

each of the icons would be given an id in this file with the filename of the icon without the extension obviously

then we could simply use the icons like so

Code: Select all

<svg class="o-icon" aria-hidden="true">
	<use xlink:href="#new"></use>
</svg>

<svg class="o-icon" aria-label="username Online">
	<use xlink:href="#online"></use>
</svg>

The as you can see the #new is the reference to the icon to load

The two examples above differ in that for icons that have labels we want to hide from screen readers by adding the aria-hidden="true"
For icons that do not have labels we need to provide proper labels via tooltips for screen readers by using aria-label="text goes here"

not exactly sure where the best place to render these too would be possibly the main icons dir...can be worked out later.

The build setup
to handle this I am proposing we use gulp and node as they are well tested and used for this in countless projects.

we would mainly be leveraging svgmin & svgstore

svgmin - runs svgo for optimization based on an rc file
svgstore - builds a defs/sprite file

This would require 2 or three locations
Development version of icons
Production version of icons
Sprite location

we could also just overwrite the icons instead of breaking it out. But this is not a very clean approach.

Rules & Guidelines

• Names for the icon need to be standardized and scrutinized. No spaces/camelcase/underscores...Only - delimited
• If the icon is to be styled via css link it needs no fill rules. (Single color icons are best if you wish duatone is possible via opacity attributes)

  Code: Select all

  	<symbol id="phpbb_icq" viewBox="0 0 24 24">
  		<g fill-rule="evenodd">
  			<path d="M9.2 2.983c-.615-.136-1.12-.082-1.65.192-.589.355-.925.9-1.065 1.665-.14.791 0 1.556.42 2.32l.196.273-.672-.219c-.84-.191-1.624-.082-2.407.327-.812.41-1.316.983-1.652 1.775-.308.764-.28 1.502.112 2.183.168.301.42.546.643.71.336.328.757.519 1.26.6l.196.055-.42.354c-.392.329-.616.738-.756 1.147-.14.491-.084.982.196 1.447.14.219.28.41.504.546.224.191.504.328.84.354.616.137 1.26.137 1.96-.081l-.505.819-.14.355c-.28.873-.196 1.637.224 2.428.196.301.42.574.644.82.336.3.756.49 1.26.627.84.219 1.68.192 2.492-.218.784-.41 1.288-1.065 1.54-1.884l.028-.164c.531.573 1.036.955 1.596 1.092.56.164 1.12.136 1.623-.19.477-.274.812-.738.98-1.311.14-.6.14-1.201 0-1.883.28.19.56.326.896.409.895.273 1.68.245 2.463-.164.757-.409 1.26-1.065 1.512-1.911.225-.819.168-1.61-.252-2.374l-.14-.219c-.223-.327-.448-.655-.783-.873-.28-.191-.616-.328-.924-.465.868-.409 1.484-.982 1.764-1.719.195-.6.14-1.092-.14-1.583v-.055c-.336-.546-.784-.9-1.484-1.091-.42-.082-.896-.082-1.315-.055l-.925.191.309-.682c.28-.873.196-1.72-.28-2.511l-.084-.136c-.42-.683-1.036-1.092-1.876-1.31-.867-.219-1.68-.136-2.463.272-.784.41-1.344 1.038-1.596 1.857v.054l-.028.192-.112-.191-.28-.493C10.46 3.584 9.9 3.175 9.2 2.984zm7.14 1.638c.139.273.224.6.224.955l-.085.6a3.743 3.743 0 0 1-.419.82l-2.52 3.002c-.251-.19-.532-.327-.812-.464l-.28-3.084-.029-1.092.029-.273c.14-.545.531-.955 1.036-1.228a1.925 1.925 0 0 1 1.595-.137c.588.137 1.009.437 1.26.901zm-8.68.546c.029-.491.225-.819.56-1.01.168-.136.42-.136.644-.027.504.136.923.491 1.26 1.173.14.274.28.546.335.874l.56 3.22-.42.137-2.49-2.648-.14-.272c-.224-.492-.364-.955-.308-1.447zM6.15 8.361l.756.3L9.37 10.41a2.374 2.374 0 0 0-.448.818l-4.031.492-.28-.055c-.504-.082-.84-.3-1.064-.71-.224-.409-.224-.819-.056-1.228.196-.519.56-.928 1.092-1.147.503-.273 1.007-.355 1.567-.219zm11.394.026c.504-.218.98-.273 1.484-.218.477.054.812.273.98.6l.112.355-.056.273c-.196.492-.616.873-1.315 1.174-.28.136-.588.191-.924.245l-3.443.41-.056-.192-.056-.081.112-.136 2.828-2.293.334-.136zm-7.139 2.594a1.94 1.94 0 0 1 1.316-.491c.504 0 .98.191 1.288.491.392.383.56.792.56 1.283 0 .49-.168.955-.56 1.283-.364.354-.784.545-1.288.545-.532 0-.98-.191-1.316-.546a1.712 1.712 0 0 1-.56-1.282c0-.491.196-.9.56-1.283zm.644 3.958c.056.928.14 1.91.28 2.976v1.091l-.028.273c-.196.491-.532.901-1.036 1.12a2.052 2.052 0 0 1-1.54.19c-.56-.136-.98-.463-1.203-.9-.14-.273-.253-.6-.253-.928l.14-.627a1.49 1.49 0 0 1 .42-.765l2.351-2.73c.281.136.561.273.87.3zm2.156-.355l1.176 1.174.727.873.14.273c.252.465.392.901.336 1.42-.055.491-.224.846-.56.983-.196.136-.42.136-.644.109-.531-.136-.951-.546-1.26-1.201l-.335-.9-.42-2.376.477-.163.363-.192zm1.26-1.692l3.163-.273 1.12-.027.28.027c.42.136.812.382 1.037.791.28.301.42.71.42 1.174l-.085.546c-.14.546-.476.955-.951 1.174-.504.273-1.009.327-1.569.136a1.384 1.384 0 0 1-.755-.436l-2.94-2.375.196-.409.084-.329z"/>
  			<path opacity=".5"  d="M11.72 10.49c.504 0 .98.191 1.288.491.392.383.56.792.56 1.283 0 .49-.168.955-.56 1.283-.364.354-.784.545-1.288.545-.532 0-.98-.191-1.316-.546a1.712 1.712 0 0 1-.56-1.282c0-.491.196-.9.56-1.283a1.94 1.94 0 0 1 1.316-.491z"/>
  		</g>
   	</symbol>
  

[DavidIQ]

The images folder would contain a new folder called icons

Which images folder? The one in the root or the one in the style? If the later then will that mean that every style will need to include their own SVG library?

[hanakin]

for styles, but the the other one should work the same way.

It would still benefit from template inheritance so you could override them. you would not need to include your own.

[DavidIQ]

Then maybe it should be in styles/all/theme/images? You're the point man on this so I leave it in your hands, but we also want to try and keep things simple for style authors if these are going to be used and re-used by different styles.

[hanakin]

yes thats what i had in mind...in fact i invasion most of the default theme being in all other than the theme.css stuff and maybe a few theme specific components...

[JoshyPHP]

These would then be included into the template header just after the body tag.

That would mean that every icon would be included in every page. How about storing it in a static file? You can still reference the symbols via xlink, e.g.

Code: Select all

<svg class="o-icon" aria-hidden="true">
	<use xlink:href="/path/to/sprite.svg#new"></use>
</svg>

This is subject to same-origin restrictions but otherwise it should work the same. My favourite spriting method for SVG would be using fragment identifiers but Safari lags behind other browsers in their support.

[hanakin]

external files is also not wide supported and very buggy unfortunately. This is also another reason for the subsets they only need included on the page they are used on. ie there are no posting icons on index so no need to include it there... either way we still have the defs file which is the same this does not affect the build process.

[Arty]

Thing about SVG sprites is they don't work with all browsers, entire sprite needs to be inserted into DOM, so icons aren't cached and sprite building process isn't user friendly. There are more downsides to using sprites than upsides.

But I've got a solution

[shameless plug start]

I've been working on this for several months and its close to being ready: https://github.com/simplesvg/simple-svg
Plugging it here before its official release because I saw this topic and I think my solution would fit it nicely.

My SVG framework is open source, easy to use, compatible with all browsers down to IE9. Also comes with over 20k premade SVG icons, including FontAwesome, MDI, few emoji libraries and others.

This is a test page for icon search dropdown (shows content of dropdown, not dropdown): https://simplesvg.com/test/search.html

There are minor issues with test page. If you are stuck on "Loading", try different browser. Its still in development, so there are bound to be some bugs.

------ and now longer explanation ------

What is SimpleSVG?

Its a replacement for glyph web fonts. It scans page for icon placeholders, replaces them with SVG icons. Features:

• Loads icons on demand. Web fonts load entire fonts, but this script loads only icons that are used on page.
• Watches DOM for changes, so icons inserted by JavaScript are replaced.
• Has huge collection of premade icons from different sources, all released under different free licenses. Over 20,000 icons.
• Its fast.

Some technical stuff about SVG:

• There are 2 types of icons in premade collection: monotone (such as FontAwesome and MDI) and colored (Emojis). Monotone icons use color property for icon color, just like glyph fonts.
• By default icons are scaled down to 1em height. You can change size by changing font-size or by specifying height/width attributes.
• Syntax for inserting icon in document: <span class="simple-svg" data-icon="fa-home"></span>
• It can be used as background image as well. See below.
• Icons are stored and handled in custom JSON format, not as SVG images. See "icons" repo on GitHub for sample. Why? Because SVG tag is generated dynamically based on parameters, so only actual body is needed. JSON object for each icon contains width, height and body.

How to use it in HTML

See https://github.com/simplesvg/simple-svg ... /README.md


Using icons in CSS

One nice, but rarely used feature of web fonts is using it in CSS as fake background image. Usually its done like this:

Code: Select all

.whatever:after {
  content: '\0x1234';
  font-family: FontAwesome;
}

Can the same be done with SimpleSVG?

Yes, it can! SimpleSVG CDN includes script that generates SVG icons that you can use as background in stylesheet like this:

Code: Select all

.whatever {
  background: url('https://cdn.simplesvg.com/svg/?icon=fa-home');
}

But there are downsides.

First, background SVG cannot inherit color value, so for monotone images you must specify color in parameter "color":

Code: Select all

  background: url('https://cdn.simplesvg.com/svg/?icon=fa-home&color=red');

Second, you might need to set background size. By default generated SVG will have height of 1em, width is automatically set using icon's width/height ratio. You can set background size 2 ways: using background-size or adding "width" and/or "height" parameters to URL:

Code: Select all

  background: url('https://cdn.simplesvg.com/svg/?icon=fa-home&width=24px&height=24px');
  background-size: cover;

If your width and height do not match image's width/height ratio, do not worry. Unlike PNG images, SVG will not lose its aspect ratio, icon will scale to fit both attributes and will be centered.

These downsides do not apply to inline usage via span tag. These downsides are only when using SVG as background image.


Custom icons

If you are a designer, you might want to create your own set of SVG icons.

Good news is SimpleSVG supports custom collections.

What are requirements?

• Your icon sets must have their own prefix, such as "fa" or "whatever". Prefix must contain only characters [a-z0-9] and is case insensitive.
• Icons are loaded on demand, so you need some website to load icons from. Your website will do.

Are there any tools and documentation? Yes, there are (or will be):

• Tool to clean up SVG icons: to be published later
• Script to serve your icons from your own website: https://github.com/simplesvg/cdn

How to add your collections to SimpleSVG collections list?

You can add it as configuration, you can add it as URL parameter to script or you can even build your own version of script with preloaded icons. See CDN script readme: https://github.com/simplesvg/cdn/blob/master/README.md

Other stuff

Things worth mentioning:

• All tools needed to make custom SVG sets, create your own CDN, create your own version of SimpleSVG or create your own icon finders will be published and they will be open source.
• Most tools are ready, but aren't in usable form. It will take a while to clean them up and its not a priority. If you do need some script that hasn't been published yet, poke me. Almost all tools are written in JavaScript and require Node.js.
• Documentation will be available too. For now just ask questions here.
• CDN currently serving icons is not a proper CDN. Proper CDN will be there later when project is published.

Dependencies:

• SimpleSVG requires support of classList. IE10+ support it. To support IE9 without loading additional libraries in modern browsers add this to document header:

  Code: Select all

  <!--[if IE]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20150312/classList.min.js"></script>
  <![endif]-->

• SimpleSVG also relies on MutationObserver and WeakMaps. It will load those dependencies automatically for browsers that do not support it from CDNJS. If you prefer not to use CDNJS, URL for polyfill can be configured.
• Icon finder (icon picker thingie linked in sample, not the main library) will load all dependencies automatically from CDN. It requires React and ReactDOM. But that part isn't ready yet, so for now both React and ReactDOM must be included on page.
• Icon finder search index is loaded automatically. No need to add any dependencies to document header. Dependencies are loaded only when icon finder is used, so bandwidth is not wasted if user does not open icon finder.

Tomorrow I'm leaving for UK/France for a week, without internet, so I won't be able to reply to any questions. Development will continue when I return.

[hanakin]

Hmm sounds interesting I'll look it over tonight but my initial questions would be how does it handle the differences in svg libraries as far layout Seung as how fanfir example uses currently 14px soon to be 16px vs 24px for mdi as far as alignment? Exspecially given that fa default to bottom alignment where mdi is middle based?

[Arty]

It doesn't handle it. That's a problem of web fonts, not issue with images.

Images are inserted inline, how they are displayed is completely up to designer. Framework does not insert opinionated stylesheet. SVG images can be changed just like any other image. If image needs to be shown below baseline, add appropriate css, just like if it was any other image.

In default set some icons are extracted from web fonts: FontAwesome, ZMDI, VS. They use baseline setting from font for most icons, with exception of icons where using that baseline would result in part of icon being cut out. Out of 43 premade collections only 4-5 are extracted from fonts.