• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Arty

Well-known member
#1
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>:
Code:
<script src="//cdn.simplesvg.com/js/"></script>
then to add any icon, write something like this:
Code:
<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:
Code:
<span class="simple-svg" data-icon="mdi-home"></span>
Plugins make SimpleSVG search for other selectors, so you can keep using old library syntax:
Code:
<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:
Code:
<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

Well-known member
#2
SimpleSVG usage

For developers: how to use SimpleSVG in your pages.

First you need to add script:
Code:
<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:
Code:
<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.
Code:
<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
Code:
<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:
Code:
<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):
Code:
<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:
Code:
<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:
Code:
<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:
Code:
.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:
Code:
.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:
Code:
.whatever {
    background: url("https://cdn.simplesvg.com/svg/?icon=mdi-account&color=red") left center no-repeat;
}
Code:
.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:
    Code:
    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.
 

Arty

Well-known member
#4
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
 

Arty

Well-known member
#6
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

Well-known member
#7
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
Code:
<script src="//cdn.simplesvg.com/js/"></script>
script should be loaded with
Code:
<script src="//code.simplesvg.com/latest/simple-svg.min.js"></script>
FontAwesome plugin should be loaded separately with
Code:
<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
Code:
https://icons.simplesvg.com/fa/fa-home.svg
You can add additional parameters as query string, such as
Code:
https://icons.simplesvg.com/fa/fa-home.svg?color=red&height=64
One more step closer to version 1.0.0 :D