SimpleSVG - replacement for glyph fonts, offering more than 20,000 icons

[Arty]

XenForo 2 default style uses FontAwesome. You can select custom icon for node, which is cool, but you are limited to small set of FontAwesome icons.

FontAwesome is... awesome, but as any other glyph font, it has downsides that limit users to only small set of icons:

• Clients need to load entire fonts. You cannot just select which icons to load, entire font has to be loaded.
• Not much choice of icons. When selecting any font, you are pretty much limited to icons in that font because of loading speed. Loading more than 2 fonts will slow down your page a lot, so almost nobody uses more than 1 font. Because of that selection of icons is limited to few fonts.
• Rendering issues. Fonts are rendered differently on different operating systems and even in different browsers on same operating system. Using font to display icons means icons will not be shown the same way for all clients.

In preparation for XenForo 2 I wanted to find a solution for those issues. Those are all vector icons, so displaying them as SVG shouldn't be hard, right? Wrong. There are bunch of issues with using SVG icons:

• Using SVG icons as external images, like PNG/JPG/GIF, has some downsides:
  • Images cannot inherit document color. That means each shape in SVG image must have hardcoded color. That means if image supposed to change color when clicked, entire image has to be replaced with different image.
  • SVG sprites aren't supported by some browsers, making them completely useless for anything other than experimenting. They are also not trivial to build. That means each SVG image has to be stored separately.
  That makes external SVG images very hard to use.
• Preload SVG into DOM? Every image will be loaded on each page load, often multiple times per page (not all browsers support sprites).
• SVG images aren't easy to prepare. Glyph fonts are - just plug it in, write few lines of code and that's all.

So I wrote a library that solves all those issues. First it was a project designed for my own styles, but later it grew into a bigger separate project that I decided to release as open source.

What is SimpleSVG?

It is SVG framework that works similar to glyph fonts, but without glyph fonts downsides.

It is as easy to use as glyph fonts. Add one line of code to page, preferably before </body>:

<script src="//cdn.simplesvg.com/js/"></script>

then to add any icon, write something like this:

<span class="simple-svg" data-icon="fa-home"></span>

For list of available icons see search form in "Samples" section below.

What makes SimpleSVG different from glyph fonts:

• Icons are loaded on demand. Glyph fonts load entire fonts, SimpleSVG loads only icons that are used on page.
• Over 20,000 premade icons to choose from, including FontAwesome, MDI, Entypo+ and many other collections.
• Emojis! Default collection includes several emoji sets: Emoji One, Firefox Emoji, Noto Emoji, Twitter Emoji. Using SimpleSVG you can use any or all of those emoji sets on same page. Icons will be displayed exactly the same for all visitors, regardless of their browser and operating system.
• Icons are rendered exactly the same in all browsers. No more blurring because of font rendering settings.

What makes SimpleSVG different from inserting SVG into document:

• Monotone icons inherit color from stylesheet. It works just like glyph fonts: to change color you need to set color in stylesheet using something like "color: red".
• Icons are automatically scaled down to current font size and aligned to baseline, just like glyph fonts. To change icon height you need to set different font-size. You don't need to worry about dimensions of original SVG icon, SimpleSVG will take care of everything for you. There is also option to set custom dimensions using width and height attributes. More details on that will be posted later.
• Icons are loaded in bulk from CDN as JSON data, which contains only shapes, width and height. One HTTP(S) request can load several icons at the same time without SVG overhead, so it loads fast and uses less bandwidth. 100 icons takes only 15-20kb (sometimes more, sometimes less - depends on complexity of shapes of those icons).
• No need to host SVG icons set. Icons are loaded dynamically from CDN. Though currently it is not a proper CDN, its basic hosting provided by me. Proper CDN will be available later.

Other stuff:

• Migrating from glyph font? There are several plugins available that lets you use SimpleSVG without changing code. Currently plugins are available for FontAwesome, Icalicons and PrestaShop icons.
• Want to use SVG as backgrounds? It is possible. CDN can generate SVG images that you can use as background in stylesheet. Downside is you need to specify color in URL because backgrounds cannot inherit color from DOM element.
• Want to create your own icons set? It is possible. Tools for creating custom sets will be published within next few weeks. Tools for hosting custom CDN are already available on GitHub. Or instead of hosting, you can append icons to page as script. More details on that will be added later.
• Can SimpleSVG be used with premium icon sets? Yes. All you need to do is host your own CDN for your icons and add one line of code to make SimpleSVG load icons with your custom prefix from your server. Icon prefix is first few letters in name of icon before first "-", such as "fa" in "fa-home".
• What if you change document after page load? SimpleSVG observes DOM for changes, replacing all new span tags with SVG images. AJAX forms and anything else that adds content to page will work fine.
• Browser support. SimpleSVG works with all modern browsers. From old browsers it supports old WebKit (Safari, Chrome used on outdated phones), Internet Explorer 9 and newer versions.
• Script does not have any dependencies. Support for old Internet Explorer requires several polyfills (WeakMaps, Observer), but SimpleSVG will load them automatically.

Sample

Want to see it in action? Unfortunately main website isn't ready yet, its not a priority right now. But you can see search overlay test page: https://simplesvg.com/test/search.html

That is a test page for icon picker I've made for XenForo 2. That page has 2 search blocks: full search with list of collections, search limited to EmojiOne icons.

There are so many icons to choose from, just searching for "chat" returns many icons that forum owners can use instead of forum icons:

In emoji search you can filter emojis by categories and search by keywords:

Click any icon on full search sample to get HTML code for it. Browse collections to see how many icons are available with SimpleSVG.

You can't get that many choices with any glyph font, bandwidth requirements would be massive, but with SimpleSVG load on demand number of icons website owners can use is unlimited.

Plugins to make migration easier

Some icon sets used in SimpleSVG are imported from glyph fonts. SimpleSVG includes plugins for some of those collections that make it easier to migrate from font library.

By default SimpleSVG is searching for items with simple-svg class and uses data-icon attribute to get icon name:

<span class="simple-svg" data-icon="mdi-home"></span>

Plugins make SimpleSVG search for other selectors, so you can keep using old library syntax:

<i class="fa fa-arrow-left"></i>

How to use plugins? Add "plugins" parameter to SimpleSVG script tag with list of plugins separated by comma:

<script src="//cdn.simplesvg.com/js/?plugins=fa"></script>

Here is FontAwesome example page without using FontAwesome:

Original page that uses FontAwesome: http://fontawesome.io/examples/
SimpleSVG page: http://simplesvg.com/test/fa-examples.html

SimpleSVG page is identical, except that I removed FontAwesome code, added SimpleSVG code + FontAwesome plugin, removed ads and few sections. All icons on that page are SVG. Pages look almost identical, but SimpleSVG copy should look a bit sharper in some browsers.

Code, license

Main website is not ready yet, it will be available here: https://simplesvg.com/

All code is available on GitHub: https://github.com/simplesvg

SimpleSVG and all support libraries are released with MIT license. That means you can use it in free and commercial projects.

Icons collections are released under different licenses set by their creators. You can see licenses in search test page in list of collections. All collections included in SimpleSVG are released with some kind of free license.

Other

SimpleSVG is separate project from Artodia, all developers are welcome to use it in their projects, free and premium. I will be using it in my XenForo 2 styles.

 

[Arty]

SimpleSVG usage

For developers: how to use SimpleSVG in your pages.

First you need to add script:

<script src="//cdn.simplesvg.com/js/"></script>

You can add it in head section, but to load page faster it is better to add it in footer before </body>

Custom dimensions

By default icon is displayed inline, with height set to 1em and vertically aligned to baseline. That makes it perfect to fit in text. But what if you don't want that?

You can specify custom dimensions. If you set custom height, SimpleSVG will no longer align icon to baseline, so you can align it as you want. You can set value in pixels, em or rem.

To set custom width and/or height, add width and/or height attributes to icon:

<span data-icon="emoji-biohazard" class="simple-svg" width="64px" height="64px"></span>

You can also use data-width and data-height attributes instead of width/height. They are aliases.

<span data-icon="ion-ios-tennisball-outline" class="simple-svg" data-width="64px" data-height="64px"></span>

What about width/height proportions? Do not worry, SVG images do not scale like other images. If original icon is square and you set different custom width and height, icon will not lose its aspect ratio. Icon will be centered instead.

If you specify only one dimension, other dimension will be set using original SVG aspect ratio. For example, emoji1-art is 64x64, so if you use

<span data-icon="emoji1-art" class="simple-svg" data-height="32"></span>

width will be automatically set to 32.

Transformations

You can rotate and flip icons by adding data-flip and data-rotate attributes:

<span data-icon="vaadin-home" class="simple-svg" data-rotate="90deg"></span>

That code will rotate home icon from Vaadin collection by 90 degrees. Only rotations for 90, 180 and 270 degrees are supported, to add custom rotation you need to set custom transformation in CSS. Instead of degrees you can use numbers: 1 = 90deg, 2 = 180deg, 3 = 270deg.

To flip icon vertically add data-flip="vertical". To flip icon horizontally add data-flip="horizontal". To flip icon both vertically and horizontally add data-flip="horizontal,vertical" (or rotate by 180deg):

<span data-icon="mdi-arrow-left" class="simple-svg" data-flip="horizontal"></span>

Code above will flip arrow horizontally, turning left arrow into right arrow.

Alignment

If you specify width and height attributes with ratio that does not match icon's aspect ratio, SimpleSVG will center icon inside viewbox and add space on sides. For example, if icon is 64x64 and you set width to 32 and height to 16, SVG image will be 32x16 with shape centered and 8px of empty space on left and right sides.

But what if you want it to be aligned to left? You can specify alignment using data-align attribute:

<span data-icon="emoji-ant" class="simple-svg" data-width="32" data-height"16" data-align="left"></span>

Separate horizontal and vertical alignment values by comma:

<span data-icon="twemoji-airplane" class="simple-svg" data-width="100" data-height="50" data-align="top,left"></span>

Possible values:

• Horizontal alignment: left, center, right
• Vertical alignment: top, middle, bottom

Using SimpleSVG in stylesheets

One useful feature of glyph fonts is ease of use in stylesheets. Usually it is done by adding pseudo selector like this:

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

That cannot be done with SVG. What you can do instead is use SVG as background. SimpleSVG CDN includes SVG generator that creates background images for any icon. You can use it like this:

.whatever {
    background: url("https://cdn.simplesvg.com/svg/?icon=emoji-ice-skate") left center no-repeat;
}

That example uses emoji that has preset color palette. What about monotone icons? SVG cannot inherit color from DOM when used as background image. That means you need to specify color value. To specify color, add color parameter:

.whatever {
    background: url("https://cdn.simplesvg.com/svg/?icon=mdi-account&color=red") left center no-repeat;
}

.whatever {
    background: url("https://cdn.simplesvg.com/svg/?icon=mdi-account&color=%23FF8040") left center no-repeat;
}

Where %23FF8040 is URL version of #FF8040. You cannot use # in URL, so you need to replace it with %23

Optional parameters:

• width and height - width and height in pixels. If you set it to "false", original SVG dimensions will be used. It is enough to set only 1 dimension to "false", other dimension will be set to "false" automatically:

  https://cdn.simplesvg.com/svg/?icon=mdi-account&color=red&height=false

• align - alignment, used when custom width/height ratio does not match original SVG width/height ratio. Values are the same as in data-align attribute mentioned above.
• flip, rotate - transformations. Same as data-flip and data-rotate mentioned above.

Available icons

You can browse available icons using icon search test page: https://simplesvg.com/test/search.html
Hover any icon to see icon details. Click any icon to get HTML code.

You can use SimpleSVG with custom icon sets. More details will be published later if anyone is interested in creating custom icon sets.

 

[HWS]

Awesome work! Thank you!

 

[Arty]

Thanks.

Published set of tools needed to make custom icons sets and other custom changes:

• Import/export different formats
• Optimize (optimization uses SVGO)
  
• Clean up
• Crop images
  
• Get/change palette
• Find/alter shapes

Available at https://github.com/simplesvg/tools and https://www.npmjs.com/package/simple-svg-tools

Sample code is in readme.md and directory "sample". Tools are written in JavaScript for Node.js

 

[Mouth]

I added <script src="//cdn.simplesvg.com/js/?plugins=fa"></script> and confirmed it appears at the bottom, shortly before </body>
Then removed <link href="https://mysite.com/[...]/font-awesome.min.css" rel="stylesheet">
The icons at the top of the reply form then don't show correctly.
Did I miss something?

 

[Arty]

That plugin replaces icons for dom nodes, like <i class="fa fa-home" />.

In XenForo 2 and XF1 styles that use FontAwesome, most icons are inserted in stylesheet using pseudo elements, so that plugin is useless for it. They need to be re-coded.

 

[Arty]

Icons are served from proper CDN!

Icons should have 50-200ms loading time from anywhere in the world. It still requires some tweaks to improve performance, but overall reasonable response time has been achieved.

It was a challenging task. Every link is different, generating SVG images or collections of images from list of parameters. There are millions of possible URL combinations. That makes all conventional CDN services useless.

After a week of researching and testing different cloud solutions, new CDN is up and running. AnyCast DNS is handled by AWS Route53, there are 7 instances of CDN across the globe running on Node.js, Route53 will redirect to closest based on latency.

It is temporary hidden behind CloudFlare, which adds about 50ms to loading time. It is because I haven't figured out what to do with SSL yet.


New script URL

Instead of

<script src="//cdn.simplesvg.com/js/"></script>

script should be loaded with

<script src="//code.simplesvg.com/latest/simple-svg.min.js"></script>

FontAwesome plugin should be loaded separately with

<script src="//code.simplesvg.com/latest/plugin-fa.min.js"></script>

New URL for SVG images

SVG images used in background are now available at easily readable URLs that don't contain query string, such as

https://icons.simplesvg.com/fa/fa-home.svg

You can add additional parameters as query string, such as

https://icons.simplesvg.com/fa/fa-home.svg?color=red&height=64

One more step closer to version 1.0.0

 

[Arty]

Big update for SimpleSVG!

Over last few months I've been rewriting many parts of SimpleSVG project.

Why would I do that? Because old SimpleSVG was hard to maintain. Whenever one icons collection is updated, it required running lots of scripts to update website, API and then manually uploading them all on servers. So I rewrote many parts to automate process.

What's new:

• Project has been renamed from SimpleSVG to Iconify.Design. New website is at https://iconify.design/ For backwards compatibility, old SimpleSVG is still supported by API.
• More icons. Now there are over 30,000 icons
• Icons are updated daily. When authors add new icons, they will appear on Iconify within 24 hours.
• In HTML code class has changed from "simple-svg" to "iconify" and custom tag from <simple-svg> to <iconify-icon>. This change is not backwards compatible, however if you are using old SimpleSVG script you can use old code. You need to update code only if you are updating from SimpleSVG to Iconify.

What's new behind the scenes (not visible to users):

• New tools that retrieve icons from fonts or SVG sets, clean them up, convert it to JSON collection and automatically publish it on GitHub, Packagist and NPM. Whole process is fully automated.
• When JSON collection is updated, old icons that are removed from icons set are marked as hidden instead of being deleted. For example, IonIcons have recently deleted icon ion-android-time. Iconify kept it in JSON file and marked it as hidden. That means it will not show up in search results and in icons list, but icon remains usable, so website owners do not have to worry about icons magically disappearing.
• Similar to hidden icons, when icon is renamed it can still be accessed by old name. Goal is the same - making sure icons remain usable and websites using icons will not break.
• Iconify API servers automatically synchronise collections from GitHub without downtime. This function is available in both Node.js and PHP versions of API script that are publicly available on GitHub.
• Icons search index has been moved to API, making it easy to write icon search applications.
• Website has been rebuilt. Old website used to be generated by Jekyll as set of static files, new one is dynamically generated by PHP and it uses latest icons data from GitHub repository (also automatically synchronising it whenever new icons are added)

Iconify is approaching release. Today I have released version 1.0.0 release candidate 1.

 

[Dad.]

Amazing work Arty. I'd love to hear about performance benefits of this as well or tradeoffs with building a custom font (beyond convenience).

 

[Arty]

Amazing work Arty. I'd love to hear about performance benefits of this as well or tradeoffs with building a custom font (beyond convenience).

Thank you.

As for comparison with font, I actually have a tutorial for that: https://iconify.design/docs/iconify-svg-fonts/

Main upside is choice. That is very important in environment such as XenForo where theme designers and add-on coders might want to use different icons. Custom fonts might cause problems because add-ons assume theme is using FontAwesome, so entire FontAwesome has to be included anyway. With Iconify there is more choice. Iconify also has ability to add custom icons and there are multiple ways to do that, so its possible to use it with custom sets while not worrying about other coders using something else.

Then another upside is rendering precision. Over many years I've had lots of complaints about icons not rendering perfectly in my themes. That's because icons from fonts are rendered as text, which means operating system mostly deals with it. On Windows semi-transparent pixels have weird colours. Thickness is different. Alignment can be an issue because bottom and top corners aren't actually bottom and top of glyph.

But there is downside: icons are hard to use in stylesheet. Unlike fonts, SVG cannot inherit color from parent element when used as background, so color must be set in SVG. Each icon has to be loaded separately. That is a big downside for using Iconify with XenForo 2 because XenForo 2 framework is built with assumption that FontAwesome will be used and icons are used as pseudo elements with text, not as images.

 

[Arty]

Some screenshots of upcoming Iconify integration add-on for XenForo 2

Icon picker will be easily reusable template macro. Also there will be new option and style property type.

 

[Dad.]

Very very nice. Will there be a premium license for developers to add this in to their products?

 

[Arty]

Very very nice. Will there be a premium license for developers to add this in to their products?

It will be free. My current idea is to later add some premium icon sets with subscription, similar to FontAwesome Pro, but Iconify and integration tools will always be free.

 

[Dad.]

It will be free. My current idea is to later add some premium icon sets with subscription, similar to FontAwesome Pro, but Iconify and integration tools will always be free.

That is brilliant. As soon as this is ready, happy to add it in to our themes. Make sure it has a link back to your project somewhere on that modal for premium then!

 

[imno007]

Looking forward to the addon!

 

[Arty]

Iconify integration add-on preview is available here: https://xenforo.com/community/resources/iconify-integration.6851/

Also it is available on GitHub: https://github.com/cyberalien/iconify_xf2

This add-on is meant only for developers. It doesn't add anything shiny for end users, its purpose is to make creation of add-ons such as custom node icons, custom navigation icons and so on possible.

Add-on probably has some bugs.

One more important thing: add-on modifies src/config.php because otherwise addition of custom XenForo template engine tags is not possible. If src/config.php is writable, add-on will add all necessary code by itself during installation and will remove it when uninstalled. Otherwise it will show error during installation until you manually add necessary code.

 

[Hoffi]

Can these also be used in the reactions?

 

[Arty]

Can these also be used in the reactions?

Probably not.

It has been way over a year since I tried integrating Iconify with XenForo. XenForo 2 heavily relies on FontAwesome and background images, changing that behaviour is almost impossible.