What Is SVG? Scalable Vector Graphics Explained
The Short Answer: SVG Is a Text File That Draws Pictures
SVG stands for Scalable Vector Graphics. Unlike a JPEG or PNG, which stores color values for a fixed grid of pixels, an SVG file stores a set of mathematical instructions that tell a renderer — a browser, an image editor, a print shop's RIP software — how to draw shapes. Open any SVG in a plain text editor and you'll see XML markup: paths defined by Bézier curves, circles with a center coordinate and radius, rectangles with explicit width and height attributes. A simple logo might be just 2 KB of text. The word 'scalable' is the key selling point. Because the file describes geometry rather than pixels, you can display the same SVG at 16×16 pixels on a favicon and at 3 meters wide on a billboard without any loss of sharpness. A raster PNG stretched to 10× its original size turns into a blurry mess; an SVG stretched to 10× looks identical to the original. SVG is an open standard maintained by the W3C. The current stable specification is SVG 1.1, published in 2011, with SVG 2 still in candidate recommendation status as of 2026. Every modern browser — Chrome, Firefox, Safari, Edge — renders SVG natively, which is why web developers rely on it so heavily for icons, logos, charts, and illustrations.
How SVG Differs From Raster Formats (PNG, JPEG, WebP)
Raster formats encode images as a grid of pixels. A 1920×1080 PNG contains exactly 2,073,600 individual color values. The file knows nothing about 'shapes' — it just knows that pixel (142, 87) is a specific shade of blue. This works brilliantly for photographs, where you genuinely have millions of subtly different color values that no mathematical formula could describe efficiently. Vector formats like SVG take the opposite approach. Instead of 'pixel (142, 87) is blue,' an SVG might say 'draw a filled circle at coordinates (150, 90) with radius 40 and fill color #0057FF.' The renderer calculates which pixels to color at display time, not storage time. This means the file is resolution-independent. The practical consequences are significant. A high-resolution company logo saved as a PNG for use across different contexts might require multiple versions: a 32px favicon, a 200px header logo, a 2000px version for print. With SVG, one file serves all three purposes. On the other hand, a photograph of a mountain range would be absurd to represent as an SVG — the file would need millions of path elements to approximate what a JPEG stores in a few hundred kilobytes with far greater fidelity. File size comparisons depend heavily on complexity. A simple two-color icon might be 800 bytes as an SVG and 4 KB as a PNG. A detailed illustration with gradients and hundreds of paths might be 200 KB as an SVG and only 80 KB as a compressed PNG. Neither format wins universally — the right choice depends on the content.
What SVG Files Actually Contain: A Look Inside
Because SVG is XML, you can read and edit it without any special software. Here is a minimal SVG that draws a red circle with a blue border: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> That entire image is 141 characters. The viewBox attribute defines the internal coordinate system — in this case a 100×100 unit canvas. The cx and cy attributes set the circle's center; r sets the radius. You can paste this directly into an HTML file and a browser will render it. Real-world SVGs exported from tools like Adobe Illustrator or Figma are more complex. Illustrator exports include a large XML header with version metadata, embedded color profiles, and sometimes Base64-encoded raster images for effects that can't be represented as pure vectors. A logo exported from Illustrator's File > Export > Export As > SVG dialog with the 'Minify' option unchecked can easily be 15–20× larger than the same file run through an SVG optimizer like SVGO. Paths are the most powerful SVG element. The d attribute of a <path> element accepts a mini-language of commands: M (moveto), L (lineto), C (cubic Bézier curve), Z (close path), and several others. A single path element can describe an arbitrarily complex shape — the outline of a country on a map, a custom typeface glyph, or an organic illustration. This is why vector artwork can represent smooth curves without any stairstepping, regardless of zoom level.
Common Use Cases: Where SVG Excels and Where It Doesn't
SVG is the right choice for logos and brand marks. A company logo needs to appear on a website header (roughly 120px tall), a business card (about 0.75 inches), a trade show banner (several feet), and potentially on merchandise. Maintaining separate raster files at every resolution is error-prone. One well-structured SVG handles all of these without any quality degradation. Icons are another natural fit. Icon sets like Font Awesome and Google's Material Symbols are distributed as SVG, and most modern UI frameworks consume them directly. At 24×24 pixels, an SVG icon is visually identical to a carefully hand-crafted pixel-art PNG, but it also scales cleanly to 48px or 96px for high-DPI screens without any extra work. Data visualization is a major SVG use case that many people overlook. Libraries like D3.js generate SVG charts dynamically in the browser. A bar chart, scatter plot, or geographic map built with D3 is pure SVG — every bar, axis label, and data point is a DOM element you can style with CSS and animate with JavaScript. SVG is poorly suited for photographs. A photorealistic image has continuous tonal gradations that vector paths cannot represent efficiently. Attempting to trace a photograph into SVG paths produces enormous files with thousands of complex shapes that still look worse than the original JPEG. For any image with photographic content, JPEG, WebP, or AVIF will produce dramatically smaller files with better visual quality. SVG also has limitations in print production. Professional print workflows often prefer PDF or EPS for vector artwork because those formats have more mature support for CMYK color spaces, spot colors, and overprint settings. SVG operates natively in RGB, and while you can embed CMYK color profiles, support varies across print software.
Converting To and From SVG: What Works and What Doesn't
The most reliable SVG conversions are vector-to-vector: AI to SVG, EPS to SVG, PDF (vector) to SVG. In these cases, the source file already contains mathematical path data, so the conversion is largely a matter of translating between formats. CocoConvert handles AI, EPS, and vector PDF to SVG conversions well — the paths, colors, and basic typography transfer cleanly in most cases. Converting raster images to SVG is fundamentally different. There is no lossless way to turn a PNG or JPEG into a true vector file. The process is called auto-tracing: software analyzes the pixel data and approximates shapes with vector paths. The results range from acceptable (a simple two-color logo on a white background) to unusable (a photograph or a complex illustration with gradients). CocoConvert offers raster-to-SVG conversion using auto-tracing, but we want to be direct about the limitation: auto-traced SVGs are approximations. For a clean, production-quality vector of a complex logo, manual recreation in Illustrator or Inkscape by a designer will always produce better results than any automated tracer. When converting SVG to raster formats like PNG, you need to specify a target resolution because the SVG has no inherent pixel dimensions. CocoConvert lets you set the output width in pixels; the height is calculated automatically from the SVG's aspect ratio. For web use, 1× and 2× exports (e.g., 400px and 800px) cover most cases. For print at 300 DPI, a 4-inch wide image needs to be exported at 1200px minimum. One conversion that frequently surprises people: SVG to PDF. Because both formats support vector paths, this conversion is clean and lossless for path-based artwork. Text in SVGs can be tricky — if the SVG uses a system font that isn't embedded, the converted PDF may substitute a different typeface. Converting text to outlines in your source application before exporting the SVG eliminates this problem.
SVG in Web Development: Embedding, Styling, and Animating
There are four main ways to use SVG on a web page, and they have meaningfully different capabilities. Using an <img> tag is the simplest approach — <img src="logo.svg" alt="Company logo"> — but it treats the SVG as an opaque image. You cannot style its internal elements with CSS or manipulate them with JavaScript. Inlining the SVG directly into HTML gives you full control. The SVG markup sits in the DOM alongside your other HTML elements. You can target individual paths with CSS selectors, change fill colors on hover, and animate elements with CSS transitions or the Web Animations API. This is how most icon systems work in modern front-end frameworks — the SVG is imported as a component and rendered inline. Using SVG as a CSS background-image (background-image: url('icon.svg')) is useful for decorative elements, but like the <img> approach, you lose the ability to style internal elements. One workaround is to encode color values directly into the SVG file and use separate SVG files for different color variants, which is inelegant but sometimes practical. SVG animation deserves its own mention. CSS animations applied to inline SVG elements work in all modern browsers. The stroke-dasharray and stroke-dashoffset properties are a popular technique for creating 'drawing' animations where paths appear to be drawn in real time. SMIL animations (the animate element built into SVG) work in most browsers but are not supported in Internet Explorer, which is less of a concern in 2026 but worth knowing for legacy contexts. For performance, large SVG files with hundreds of paths can cause layout and paint bottlenecks. If you have a complex decorative SVG background, consider rasterizing it to a WebP at the appropriate resolution instead. The vector purity isn't worth a 300ms paint delay on mobile.
Optimizing SVG Files: Reducing Size Without Losing Quality
SVG files exported from design tools are almost always larger than they need to be. Illustrator, for example, includes extensive XML metadata, editor-specific attributes in the inkscape: and adobe: namespaces, and often retains hidden layers and unused symbol definitions. A logo exported from Illustrator might be 18 KB; the same logo after optimization might be 3 KB — a reduction of over 80% with no visible difference. SVGO (SVG Optimizer) is the standard tool for this task. It's a Node.js command-line utility, but several web interfaces wrap it, including the popular SVGOMG tool. SVGOMG's interface at jakearchibald.github.io/svgomg lets you paste or upload an SVG and toggle individual optimization passes. The most impactful options are: removing editor metadata (removes Illustrator/Inkscape-specific XML), collapsing useless groups, removing hidden elements, and converting basic shapes to paths. The 'Precision' slider controls how many decimal places are kept in coordinate values — dropping from 6 decimal places to 2 typically saves 20–30% with no perceptible quality loss. For SVGs used as inline icons in HTML, you can push optimization further by removing the xmlns attribute (unnecessary when SVG is inline in HTML5) and stripping the viewBox only if you're certain the icon will always be displayed at a fixed size (generally not recommended). CocoConvert applies basic SVG optimization as part of the conversion pipeline — metadata stripping and coordinate precision reduction — but for production use, running the output through SVGOMG with manually tuned settings will get you closer to the theoretical minimum file size. Automated optimization tools make conservative choices to avoid breaking edge cases; a human reviewing the output can push further.