What is SVG?
SVG stands for 'Scalable Vector Graphics' and it is a markup language/file format for describing two-dimensional vector graphics. An SVG is used to define vector-based graphics meaning visual images are created directly from geometric shapes and other graphic primitives in XML rather than as a grid of pixels. Yes, XML not XLM.
XLM defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.
The SVG specification is an 'open standard' maintained by the World Wide Web Consortium, which is the main international standards organization for the World Wide Web, since 1999.
Why is SVG useful?
An SVG is perfect for web graphics like icons and logos; it creates images that stay sharp at any size; this makes them ideal for modern web design. Pixel based images like like JPGs or PNGs, will lose quality when zoomed in or displayed on high-resolution screens. Since SVGs are made from mathematical shapes they never lose quality when zoomed and remain perfectly sharp.
'Example of SVG vs. PNG file quality'
Since SVGs are written in code so they’re flexible, and work seamlessly across most devices making them a very affective format for digital graphics. They also have small file sizes, which helps websites load faster, and they can be easily edited or styled with CSS or JavaScript. This allows for animated effects and different interactive effects.
SVG vs. Others
Formats like PNG and JPEG are stored as 'raster images' which are great for photos and detailed imagery gradients. But for simple graphics (icons, logos) that need to be used at many sizes, raster images are not ideal. To display an image, raster formats stores a grid of pixels called a bitmap. Each pixel's color and location are stored in the file, causing multiple of the versions of the same file needing to be stored. SVG on the other hand, is a useful and flexible format for producing graphics that scale beautifully and integrate with different web technologies displays.
Conclusion
In conclusion, SVGs aren’t perfect for every situation but they are very useful. They have become a cornerstone of modern web design for their ability to scale infinitely without losing quality; as well as their responsive design and high-resolution displays. When working with complex images—such as photographs, formats like PNG or JPEG are still the better choice for dealing with textures, or detailed gradients. SVG files are relatively small, but when dealing with outside formats that aren't icons or logos, SVG files can start to get really big. In short SVG thrives in precision, scalability, and interactivity and are a standard used by web developers and graphic designers.
Sources:
- https://www.w3schools.com/graphics/svg_intro.asp
- https://www.svgai.org/blog/guides/what-is-svg
- https://www.howtogeek.com/710334/what-is-an-svg-file-and-how-do-i-open-one
- https://en.wikipedia.org/wiki/World_Wide_Web_Consortium
- https://en.wikipedia.org/wiki/Vector_graphics
- https://www.w3schools.com/xml/xml_whatis.asp
- https://www.w3.org/Graphics/SVG/About
- https://seekvectors.com/blog/advantages-of-svg-files-in-web-design-scalable-efficient
- https://svgpal.com/blog/10-key-advantages-svg-files
- https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg
- https://www.howtogeek.com/710334/what-is-an-svg-file-and-how-do-i-open-one
Top comments (0)