Working with SVGs

We want Solomon to look sharp at all pixel densities (e.g. Retina) and so we use SVG files whenever it's practical to do so.

In many cases, SVGs are used in Solomon as icons and require hover states. This can be achieved either through using the SVG as a background image, or by embedding it onto the page and manipulating the SVG directly. We use a Node package called Grunticon to help us with this.

##Using Grunticon

###Storing your images The key to using Grunticon is storing your SVG files in the right location. For Solomon this is: /public/assets/img/svg/embed.

###Running Grunticon Grunticon should be run each time you add a new SVG to the folder listed above. To run Grunticon open terminal or command prompt, cd to the directory containing your clone of Solomon and execute the following command: grunt svg

This command grabs your SVG files and transforms them into data URIs, injects them into a stylesheet and assigns class names using a predetermined pattern. For example, if you have an SVG called my-icon.svg, once Grunticon has finished its work it can be added to your markup as class="svg-my-icon" wherever you want the SVG to appear.

###Manipulating with CSS By default Grunticon will add an SVG as background image. By appending the data attribute data-grunticon-embed to your element, however, this will add the SVG itself into the DOM so it can then be targeted by CSS. For example, using <div class="svg-my-icon" data-grunticon-embed>...</div> would allow you to target .svg-my-icon svg and manipulate the SVG's style directly.

###Dynamically inserted SVGs There may be instances where you need to insert an element dynamically into the DOM. If you need this element to have an SVG embedded with it, there's an extra step you'll need to take, in addition to adding the data-grunticon-embed data attribute. That is you need to tell Grunticon to embed this newly added SVG to the page by running the following line of code after the element insertion:

Ember.run.scheduleOnce('afterRender', this, grunticon.embedSVG);

This tells Grunticon to run through the DOM a single time to check for SVGs to embed.

###Fallback images Grunticon also creates PNG fallback images for use with browsers that don't like SVGs.

###Configuring Grunticon For configuration options, check Gruntfile.js.

###Further reading See the Grunticon documentation for more support.

Return to Documentation