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 th…
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.
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