What are SVGs?
SVGs (also known as scalable vector graphics) is a vector image in a file format for two-dimensional graphics - to be displayed on websites. SVGs are created with interactivity and animation in mind, and dramatically increase the loading speed of website pages in which they are included, especially above the fold, as there are no external resources that require additional connections to slow it down.
SVG images are defined in XML text files, and have the facility to be searched for, indexed, compressed, and scripted. SVG images can also be edited and created within any text editor or drawing software, and designed to be dynamic and interactive. All the information in relation to the SVGs file (colour, size, shape, curves, lines, and text) are stored in text files which are readable, and can be modified in any way.
Elements inside SVGs can be animated to create some incredible interactive experiences, and animations can be created by integrating CSS. SVGs can be used for large hero images, or article images, as they are super responsive and flexible.
SVGs are super simple to scale up and down, without losing any of the image quality, and they are fantastic for responsive web design. They are included as much as possible in all our website designs and builds to aid the overall performance of the website.
How are SVGs created?SVG images can be generated by using vector graphics editor software, such as:
- Adobe Illustrator
- Adobe Flash Professional
- Affinity Designer
Where can you use SVGs?
Essentially, you can use SVGs for any online content. But they really come into their own when used as diagrams, animated elements, charts, graphs, and logo designs. This is because of the very nature of the scalability of SVGs. To add SVGs, it is a case of taking the SVG code, and pasting it within the HTML document.