Posted on:

In a previous post “Responsive Design Framework – Part 2: Design in the Browser” we described SVG as a valid vector tool to build light and scalable images.

This post aims to provide a real life example on how to create and implement an SVG file, through the making of the UI Farm logo.

SVG files can be handled using a text editor or a vector application such as Adobe Illustrator or Sketch App. The application we’re currently using for graphics is Sketch, which is specifically built for web designers.

UIf-logo-in-vector-app

Fig.1 — UI Farm logo in Sketch App, ready to be exported

Once the logo is designed, it’s important to optimise the file. This means the text has to be converted to outlines and the shapes grouped together in a rational way. This step is critical, because all the levels of how the logo is formed will be rendered in XML code (levels and shapes names included).

UIF-logo-levels

Fig.2 — Organising the levels

SVG source code:

<svg width="283" height="68" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <title>UIF-SVG-logo</title>
 <defs>
  <rect id="path-1" x="3.60361" y="3.8969" width="74.76114" height="47.24274"/>
  <mask id="mask-2">
   <use xlink:href="#path-1" id="svg_1"/>
  </mask>
  <ellipse id="path-3" cx="15.84707" cy="38.88459" rx="0.98226" ry="0.97455"/>
  <mask id="mask-4">
   <use xlink:href="#path-3" id="svg_2"/>
  </mask>
  <rect id="path-5" x="11.49542" y="3.01676" width="48.90314" height="31.69414"/>
  <mask id="mask-6">
   <use xlink:href="#path-5" id="svg_3"/>
  </mask>
  <ellipse id="path-7" cx="6.8273" cy="24.63677" rx="0.98226" ry="0.97455"/>
  <mask id="mask-8">
   <use xlink:href="#path-7" id="svg_4"/>
  </mask>
 </defs>
 <g>

Both Sketch App and Adobe Illustrator export vector files in SVG format. The weight of the exported file depends on how much code the chosen application uses. When created and exported with Sketch, the UI Farm logo weighed 20KB. A further optimisation can be done using the online tool SVG-Edit – which can also be used to create graphics from scratch.

Once the images are loaded, the resulting code can be copied from the online tool and pasted into the original .svg file. After this last step our logo weighs 13KB.

svg-edit

Fig.4 — Visualise the SVG source code in SVG-Edit

The SVG code can be copied in a separate file – if the logo is used as background – or embedded directly into an HTML5 file.

As the SVG format is not supported by older browsers (IE 8 and down and Android 2.3 and down) a fallback file (PNG, JPEG, GIF) is needed. We use Modernizr to detect browser features: it will add a class upon page load to the HTML element called svg if the browser supports it or a class no-svg if it doesn’t. This way it’s easy to assign the no-svg class the fallback file, which is likely to be a sprite to provide an alternative to the non-flexibility of raster graphic files.

Get in contact.

Please leave this field empty.