SimpleSVG - replacement for glyph fonts

Discussion in 'Updates' started by Arty, Apr 17, 2017.

  1. Arty

    Arty Administrator Designer

    If you are running a website, you are probably familiar with FontAwesome, maybe with GlyphIcons and few other glyph font libraries.

    They are awesome and are easy to use. To include font all you have to do is add one line of code like this
    Code:
    <link rel="stylesheet" href="link-to-css-file.css" />
    then to use icon you need to write something simple like this:
    Code:
    <i class="icon icon-name"></i>
    It is very easy, which made glyph fonts very popular.

    However there are few downsides:
    • 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="//code.iconify.design/1/1.0.0-rc1/iconify.min.js"></script>
    then to add any icon, write something like this:
    Code:
    <span class="iconify" 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 30,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. You have option to host icons yourself too (see documentation).
    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? Visit icons page on SimpleSVG website: https://iconify.design/icon-sets/

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

    In emoji search you can filter emojis by categories and search by keywords:
    [​IMG]

    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 "iconify" class and uses data-icon attribute to get icon name:
    Code:
    <span class="iconify" 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="//code.iconify.design/1/1.0.0-rc1/plugin-fa.min.js"></script>
    Code, license

    Main website is available here: https://iconify.design/

    All code is available on GitHub: https://github.com/iconify-design

    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

    Over next few months I'll be releasing tools, posting tutorials and documentation for SimpleSVG and make a proper website for it. Until website is ready, announcements will be posted on this forum.

    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.
     
    Last edited: Oct 25, 2018
    Pussy, Dadparvar and Aivaras like this.
  2. Arty

    Arty Administrator Designer

    Last edited: Dec 25, 2017
    Pussy and Dadparvar like this.
  3. Arty

    Arty Administrator Designer

    Last edited: Dec 25, 2017
    Pussy and Dadparvar like this.
  4. Arty

    Arty Administrator Designer

    Toolkit needed to clean up and optimize SVG images has been released: https://github.com/simplesvg/tools

    Toolkit includes sample script that cleans up all SVG images in directory, optimizes them and saves them in SVG and JSON formats.

    Tools included:
    • Import/export SVG images
    • Import SVG font
    • Optimize SVG - removes unnecessary code, making file smaller
    • Crop SVG - fixes viewBox, so it matches content
    • Validate tags - converts style into attributes, cleans up attributes
    • Get/change palette - get or change palette used in SVG image
    • Get length of shapes
    • Convert shapes to path
    Optimizer uses SVGO.
    Cropping SVG and getting length of some shapes requires PhantomJS to be installed.
     
    Dadparvar and Pussy like this.
  5. Arty

    Arty Administrator Designer

    Published small set of animated SVG icons: https://cyberalien.github.io/animated-icons/

    Its a small set of icons that will be used in upcoming styles. Set of icons will be expanding over time. Internet Explorer users will not see animation because of multiple IE bugs.
     
    Dadparvar and Pussy like this.
  6. Arty

    Arty Administrator Designer

    SimpleSVG is very close to being released. Recent changes:
    • Published scripts for hosting custom icons sets using PHP or Node.js
    • URLs of all files have changed. Anything that was pointing to cdn.simplesvg.com should point elsewhere:
      • Script should be included from code.simplesvg.com/latest/simple-svg.min.js
      • URLs for SVG images have changed to icons.simplesvg.com with collection prefix being part of URL, like icons.simplesvg.com/fa/fa-home.svg
      • EmojiOne collections have changed prefix from emoji- to emoji1-
      Those are big changes that break compatibility, but project is still in alpha/beta, so its acceptable.
    • Icon finder has been restructured. Script no longer requires any dependencies, such as React and ReactDOM. It will load those dependencies automatically the first time finder is displayed.

    Icons set is now hosted on proper CDN. Icon sets are loaded on demand, including only icons that are shown on page. That means dynamic URLs for icons list that have millions of possible combinations. Usual CDN cannot cache that, therefore custom CDN had to be built. So I've built custom network to serve images at 50-200ms latency. Current network includes: 2 servers in EU, 2 servers in US, 1 in Japan, 1 in Singapore, 1 in Australia. When loading icons DNS will resolve to server closest to your location, reducing latency. More servers in other countries will be added later when script becomes more popular.
     
    Last edited: May 12, 2017
    Dadparvar and Pussy like this.
  7. Arty

    Arty Administrator Designer

    Half a year later SimpleSVG is getting closer to being ready. Current version is 1.0.0-beta3

    Check out new website at https://simplesvg.com

    List of icons is available at https://simplesvg.com/icon-sets/
    There are many new icon sets, including FontAwesome 5 (only free version) and much bigger selection of emoji sets.

    Documentation is still under construction, however most of it is ready: https://simplesvg.com/docs/

    Support for SimpleSVG is provided on this forum. There is new section for SimpleSVG support.

    Syntax for SimpleSVG has slightly changed. New syntax is final, it will not change in future, so it is safe to use it on production websites. JavaScript files are now on different domain that is hosted on 8 servers across the globe.

    There might be syntax errors and typos on website. If you fine one, please report it to support forum.
     
    Dadparvar and maszd like this.
  8. Arty

    Arty Administrator Designer

    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.
     
    Case likes this.
  9. Arty

    Arty Administrator Designer

    Version 1.0.0 release candidate 2 is available. Iconify is very stable, so first public release is imminent.

    This release changes license from MIT to dual license: Apache 2.0 and GPL 2.0. Why was license changed?

    Most popular open source content management systems and forums use GPL 2.0 license. GPL is very restrictive license, so to allow easy integration I've decided to change license for Iconify to GPL.

    However using GPL license limits commercial use of Iconify. So I've also added Apache 2.0 license. It has almost no restrictions, but it is not compatible with GPL 2.0.

    When using Iconify with your projects, you can pick what license you want: GPL 2.0 or Apache 2.0.

    Also I've been working on integrating Iconify into XenForo 2 :)
     
    Aivaras likes this.