Modern browsers are doing a great job supporting the scalable vector graphics format (SVG). If you’re wondering what that gobbledygook means, here’s a quick explanation. Let’s say you have a piece of graph paper and you want to draw a bar down the page, filling in 10 squares. You fill in each square independently with a square sticker and record the square x and y coordinates to remember which ones you filled in. You basically just saved a raster format… listing the 10 squares you filled in. If you sent that to another person, they could repeat the process.

As an alternative, you cut a piece of the sticker the equivalent of 10 squares in length, place it in the first square, then align it and stick the rest to the paper. That would be a Vector. Knowing the start position, the direction, and the length of the sticker, you could pass that information onto the next person and they could repeat the process.

You can see how this comes in handy. If you wanted to paint a photo of a person, a rastor strategy would work great because you need to know the color and location of every pixel. But if you wanted to draw a cartoon, you could just have collections of vectors that you can assemble. If you want to resize the rastor larger, you’ve got a problem. The output image may look blurry. But if you want to resize the vector larger, it’s just math to recalculate coordinates – no distortion.

Common raster files are bmp, gif, jpg/jpeg, and png. Common vector files are svg. Platforms like Adobe Photoshop are designed to build raster files but can actually have vector elements embedded. Adobe Illustrator his built for vector files but can have raster elements embedded. Both can output to files like tiff and eps which can also contain a combination of elements.

For this reason, most illustrations and logos are saved in a vector format.

What is the SVG Format?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

Because they’re XML, SVGs can be searched, indexed, scripted, and compressed. If you’re working with any modern vector-based illustration package, you can typically output an SVG file.

Vecteezy: A Free, Online SVG Editor

Vecteezy has built a free, online SVG editor that’s quite robust! It boasts a friendly interface that’s easy for beginners and powerful for professionals. Features include keyboard shortcuts, advanced transformations and more. And because it’s built into a site, there’s no software to download or install. You can also output your vector as a static png file.