Why SVG'S rock

The best format for images on the web in 2018 is SVG. Not only are SVG resolution-independent, meaning that SVG graphics stay crisp at any size, on any device but SVG file sizes are smaller than other competing formats.

An SVG (Scalable Vector Graphic) is an xml based format for creating two-dimensional graphics, using coordinates to plot points and connect them to draw lines, shapes or paths. Vector graphics are drawn using mathematics, meaning they always render sharp and crisp, not pixelated like other image formats, making them perfect for logos, icons and simple illustrations.

At Brilliant we turn to svg's whenever possible for our website builds as they are far superior to rastor graphics such as jpeg's & png's.

Resolution Independent and responsive
To ensure images look their very best on all devices we use various methods of preparation, such as creating multiple versions of the same image for different screen resolutions or creating images that are 2 or even 4 times their display size.

With SVG's there is no need to go to such lengths. As the file name suggests, an SVG can be scaled to any size without degradation so no matter which browser, which device or at which resolution, the SVG image will look sharp and crisp. The same graphic will look just as good on a mobile device as it would on a 5k retina screen!


SVG scaled to 300%


JPEG scaled to 300%


Lightweight
Because SVG's are created with mathematical coordinates rather than pixels it means that file sizes are much lower. This is ideal when optimising our websites performance, ensuring that page load times are low and interactions are seamless. This also makes search engines happy and helps your website become more searchable.

Universally supported
SVG's are supported on all modern browsers for desktops and mobiles so if you're still using a version of IE8, you are missing out on a whole new world of colour and animation.

Interactive
SVG's are more than just a static graphic, they can be styled through CSS and Javascript to create all kinds of animations and interactions. You can manipulate an objects colour, position and opacity. Any text inside of an SVG is also searchable which is an extra bonus.

Providing the best user experience possible is what Brilliant is all about, utilising SVG's are just one of the ways we achieve this.