What is a SVG and why are they important?

What is a SVG and why are they important?

A SVG is a Scalable Vector Graphic, which is an XML-based vector image format. Extensible Markup Language (XML) is used to define sets of rules for encoding documents in a format that is readable by humans and computers. In short – SVG’s can be opened and edited with a basic text editor.

Computers essentially analyze each pixel of a standard image and stores its properties. This is why larger image dimensions (jpg, png, gif, etc.) produce larger file sizes. Compression is used to reduce the number of different pixels – resulting in a smaller file size and loss of clarity.

Rather than storing individual pixels, vector graphics are created with a series of shapes, lines, and points in a given two-dimensional or three-dimensional space. Mathematical equations are used to manipulate coordinates of objects within the vector image. Since vectors associate objects with coordinates, graphics can be enlarged without ever losing quality.


Why are SVGs important?

Developers quickly discover the frustration of how different websites and applications appear depending on factors such as screen size, resolution, orientation, aspect ratio, and operating system. Luckily SVGs have very small file sizes and make for the most ideal, universal, graphics.


Since SVGs can be scaled and never lose quality, they’re perfect to use for universal applications. Icons tend to get fuzzy depending on the screen quality of a device. SVG’s can scale to fill a container.

SVGs provide an easy way of animating vectors. The code can be manipulated by keyframes and trigger seamless transitions and motions. Animated graphics are a great attention grabber and can greatly enhance the style of a website or application.



Interactive: Since SVG’s are XML files, javascript can be used manipulate the vector graphics code and control the visual triggers. The capabilities that scalable vector graphics provide are near limitless.


Still have questions?

We’re happy to help! Contact us.


Leave a reply

Your email address will not be published. Required fields are marked *