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%
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.
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.
Providing the best user experience possible is what Brilliant is all about, utilising SVG's are just one of the ways we achieve this.