What Are Scalable Vector Graphics

Contents

1 What Are Scalable Vector Graphics?
2 Why SVG is so awesome
3 Tools that support SVG
4 Conclusion

What Are Scalable Vector Graphics?

Have you ever heard of SVG? It stands for Scalable Vector Graphics and it’s only vector image format for the web. Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector graphics.

As such, it’s a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics

” Vector images act differently. They provide and set of instructions about how the image should be rendered. It’s up to rendering software to compute how each pixel should be colored. Vector images are well suited for less detailed images that need to be scaled at different sizes like icon or data representations. “

Mozilla Hacks – blog for web designers, developers, and people who make websites.

Why SVG is so awesome

Indeed, SVG has some characteristic that make it unique for the web. Vector part is very important especially these day when you want a single image to fit screens of so many different sizes and resolutions.

SVG with small file sizes

If PNG file sizes are often large so that they can handle high resolutions and slow down page loading times, SVGs are far smaller in size than PNGs and aren’t likely to slow down your computer or website. Because they’re a vector file format, you can scale SVGs up or down without any loss in quality.

Easy to resize

Most brands like McDonald’s and Nike have completely swapped over to using SVGs for their content as well as icons not only do SVGs use up a smaller footprint with less data. They also allow for animation within the page and you can resize them to any screen size with any resolution on any device and continue to have the exact same quality.

Easy to modify

Since each visual element is saved using unique geometric coordinates, vector picture files are simple to edit. Designers are able to alter specific points, lines, and forms with extreme precision while maintaining the integrity of the image. Any element on the page in a vector file can be swiftly and simply resized, rotated, stretched, warped, shifted, or altered at any time.

Tools that support SVG

Desktop Applications

Adobe Illustrator (Premium)
CorelDraw (Premium)
Xara (Premium)
InkScape (FREE)

Free Web-based Tools

Method Draw
Mondrian
SVG Edit

Harryfogle 9658 – one user shared about his experience:

“Je te remercie, I do traditional art drawing, painting, but a few years ago I tried making a logo for a company I had worked for they really liked it but I couldn’t figure out how make vector line art, I now realized I need to look into scalable vector line art and realized my illustration was probably in a bit mat form . I was actually watching this for fun. (I like to learn this stuff for fun.) So it solved a problem from a few years ago but it’s still possible for me to fix it. Now I just need to get crackin on making a page. I’m just trying to do one from scratch, hadn’t done that since geocities.”

Conclusion

SVG is a vector image format and it’s easier to use a drawing tool to create an SVG image. Interestingly enough, to be mastered, SVG requires both technical and design skill, which is always a winning skill set when you’re doing web stuff.

Related posts