Despite the introduction of the Scalable Vector Graphic (SVG) format almost 20 years ago, the popularity and understanding of working with the SVG format have grown phenomenally in the last few years amongst the web community. The SVG format was brought to the table in 1999 by the World Wide Web Consortium (W3C) and is an XML based vector image format designed specifically for the web.
One of the many beauties of an SVG is that it can be scaled to literally any size, whilst always retaining quality, whereas a bitmap image, such as .jpg, .png or .gif, will pixelate when scaled beyond its natural size. Scalability means that the SVG format is a natural fit for the modern responsive web. An SVG could easily be scaled from mobile to a standard desktop display, all the way to a 5K display, and everywhere in between and beyond.
The SVG format typically has smaller file sizes than any of its bitmap counterparts, and SVG supports other interesting use cases, including animation. If you’re not yet convinced about the SVG format, I strongly recommend watching this Chris Coyer video or reading Chris’ book; Practical SVG.
The aim of this article is not to convince you to use the SVG format in your web projects, but rather a useful guide to serve those who have already adopted the use of the SVG format in their projects.
(SVG == Markup)
An SVG behaves similarly to standard bitmap when previewed in a browser or image viewer; it simply looks like a standard graphics. However, since SVG is XML-based, you can find readable, familiar, HTML-like markup under the hood. This means that you have readable line-by-line control, regardless of what tool churned out the file.
Although an SVG could be coded from scratch, most SVGs are produced in some form of graphics editors, such as Adobe Illustrator, Inkscape or Sketch. Generally, these applications export SVGs with additional, unnecessary (sometimes even outdated) elements, attributes and lines within the markup.
Here is some XML from a typical SVG icon created in Adobe Illustrator CC:
Hospital
Created with Sketch.
The SVG markup comes to a total of 21 lines of code. Now, relative to your standard HTML file, this may not seem like a lot, but it’s quite a lot of lines for a simple SVG, typically I work with SVGs of around 4-10 lines.
So, without further ado let’s dig in and see what we can remove.
The first thing that we can remove is the XML prolog.
xml version="1.0" encoding="UTF-8" standalone="no"?>
Most XML documents being with a prolog; one or more lines of code providing information about the current document and related documents. If the SVG is going to be embedded within an HTML document or another SVG, which it most likely will be, the prolog is redundant and can be swiftly removed. Although leaving the prolog will have no effect to the end user, removing it helps to keep your code clean and readable.
Our tag comes packaged with the version attribute, specifying it is using the latest version of SVG - SVG 1.1.
version="1.1" … >
This attribute has no influence or bearing on the rendering of the SVG and can be removed. So, let’s strip that out.
One thing that stands out to me is the large XML comment that was generated by Sketch.
We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.
Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.
If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.
Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.
Back to Blog
Northumbria House, Samson Close, Killingworth, Newcastle, NE12 6DX
