Why use svg

Scalable Vector Graphics SVGs are image types that are universally supported across all desktop and mobile browsers. The benefits of using them for web and app design are huge — let us talk you through the six biggest reasons.

For more inspiration, see our guides to the top website builder out there and fantastic web hosting. Images can be scaled the same way we scale all other elements in responsive web design. Due to the vector nature of SVG, the image is resolution independent.

SVG images can also be scaled the same way we scale all other elements in responsive design. Save your images in cloud storage. SVG is treated as a separate document by the browser and then positioned inside the normal DOM of the page. Elements inside SVG can be animated to create some truly amazing interactive experiences, or the animation can be used to add nice little touches to an interface, image or icon.

They offer several advantages over raster images, including:. As the quality on displays continues to increase on our devices, so must the images that we see.

Although raster remains the preferred choice for photographs because of their deep color depth , SVGs are ideal for illustrations like logos, icons, and graphs. Their infinite scalability makes them aesthetically pleasing, especially on platforms that provide an infinite digital canvas to work on.

They offer several advantages over raster images, including: Scalability — Vector images are resolution-independent and can scale to any dimension without losing quality. Browsers just recalculate the math behind the image so there is no distortion.

SVG files are unique in that they can be edited in graphic editing programs such as Illustrator or Sketch like other images, but also in a text editor where the markup can be adjusted directly.

Since no file needs to download, this results in smaller loading times for a page. This makes your website appear faster to visitors, improving the user experience. Another benefit of using the inline SVG method is that it allows you to control the styles within your image. You can control properties such as fill color, stroke color, sizing, and more through CSS. This is especially useful for adding hover effects to an image, eliminating the need for image sprites.

SVGs can be manipulated with technologies such as Javascript, making them more dynamic than raster images. For example, SVG animation is a popular technique for adding interest and interactivity to a website. As you can see, SVG is a beneficial tool for displaying vector-based images on your website.

Kayleigh is a web developer at TBH Creative, specializing in front-end development.