What is an SVG file?

SVG (Scalable Vector Graphics) is an XML-based vector image format for 2D graphics. The main advantage is that you can change the image size without losing quality or detail. The format describes images as shapes, paths, text, and filter effects, so scaling keeps everything sharp at any resolution.

SVG supports interactivity and animation. You can style SVG with CSS to change stroke width, color, outlines, hover effects, and more. Because SVG is XML, text editors can open and edit the files, and drawing tools like Inkscape or Adobe Illustrator are often used to create and refine them. Any part of an SVG can be animated, making it a flexible choice for icons and simple graphics on the web.

How can I use it?

Use SVGs for icons (e.g. icon fonts via IcoMoon), edit them in browser-based tools like SVG Edit, or work in desktop apps like Inkscape or Adobe Illustrator. For the best result when converting a raster image to SVG, use a source image with a clear, solid background and good contrast.

SVGs work great for laser cutting or crafting with a Silhouette or Cricut—import your file into the machine's software and cut from the vector paths. You can also drop SVGs straight into your web pages. For example, in HTML:

<img src="image.svg" alt="Image" />

SVG is widely supported, and many JavaScript libraries exist for manipulating and animating SVG in the browser.