What is an SVG?
SVG stands for Scalable Vector Graphic. This is an XML document that describes which shapes should be displayed where. For example:
<circle cx="0" cy="20" r="70" fill="#D1495B" />
This code draws a red circle on the screen. By combining multiple shapes and lines, you can create complex 2D images.
How to Create an SVG?
You can do this in several ways. If you're adventurous, you can start in your favorite code editor by typing an XML document. If you're more visually oriented, you can use software packages like Adobe Illustrator, the open-source and free Inkscape, Figma, or the open-source alternative Penpot. These tools allow you to create an illustration with a graphical interface and export it as an SVG.
Optimizing SVGs
The SVG files generated by programs like Illustrator, Inkscape, and Figma are not always perfectly optimized. Therefore, it's wise to optimize the SVG. You can do this by using one of the many online tools. Chris Coyier has compiled a nice overview of them on CSS tricks. Personally, I use SVGOMG.
What Can You Use SVGs For?
An SVG is suitable for 'simple' 2D images, such as illustrations or logos primarily composed of lines and shapes.
Because you can zoom infinitely into SVGs without losing quality, you can create detailed and complex images that are still easy to view. Therefore, SVGs are highly suitable for infographics.
Additionally, SVGs are well-suited for interaction. You can manipulate the shapes and lines within an SVG image using CSS and JavaScript, making them clickable or displaying specific information when a visitor hovers over a shape.
Examples of interactive infographics using SVG:
Other Advantages of SVGs
As I mentioned earlier, SVGs are suitable for animation. This allows SVGs to replace some videos. The advantage is that SVGs are smaller files than videos, which can save dozens of megabytes. This results in a faster and more sustainable website because visitors have to download less data.
Below are examples of animated SVGs:
- Animated Credit Cards by Tim Miller on Codepen
- Extensive List of SVG Animations on Onextrapixel
- SVGator (a tool for animating SVGs) also shares over 40 cool animated SVGs
I also mentioned earlier that an SVG can be infinitely scaled without quality loss. This means you only need one image file to ensure it looks good on all screen widths (and thus devices). When working with raster images (such as PNG, JPEG, or WEBP), you need multiple files and techniques to display the correct image on each screen width.
What Shouldn't You Use SVGs For?
When it comes to detailed images like photos of people, landscapes, etc., it's better to use another file format (such as WEBP). A rule of thumb is that anything 2D can be done with an SVG, and anything 3D is best displayed using a raster image (PNG, JPEG, or WEBP).
However, there are exceptions, such as a very complex 2D image, for example, a topographic map with many layers. In such cases, the many shapes and lines can result in a rapidly increasing file size. In these situations, it's better to flatten the image into a raster image.
Getting Started with SVGs?
Below, I share some SVG resources that you can use directly in your current or future projects:
- SVG Mix: A collection of SVG icons and logos
- SVG Hub: SVG squiggles, doodles, shapes, and other things
- Flowbite: Free and Open Source SVG icons
If you have any questions about the above or have a good SVG resource tip of your own, please let me know by leaving a comment below.