Scalable Vector Graphics (SVG) is a type of image file format used for two-dimensional vector graphics.
Created by the World Wide Web Consortium (W3C),(in the late 90’s) SVG is an open standard for vector graphics that is widely used across the web. It is a versatile way to create graphics for web, print, and mobile applications.
It is an XML-based markup language which makes it easy to edit and manipulate. Developers can use existing SVG files, or create their own from scratch.
What is the difference between PNG and SVG files?
There’s a lot of crossover between PNG and SVG. Find out what sets them apart.
Raster vs. vector.
Perhaps the most fundamental difference between PNG and SVG is that one is a raster file type and the other is vector.
A PNG is a raster — that is, pixel-based — image format. If you scale up a raster image too far, it becomes grainy and pixelated. Similarly, if the image is too small, it can become indistinct. While PNGs are capable of handling very high resolutions, they’re not infinitely expandable.
On the other hand, SVG files are vector-based — built from a complex mathematical network of lines, dots, shapes, and algorithms. They can expand to any size without losing their resolution.
All svg documents are are enclosed in <svg></svg> tags.
Things I learned:
- Basic shapes like rect, circle, ellipse, polygon
- Installed the VSCode Extension for SVG
- rotate animations implemented
- filters and gaussian blur
More to learn:
- Bezier curves
- How to export these as standalone SVGs
Debugging:
- Images are not being able to be embedded into .svg files