A complete guide to SVG: Basics, application and insertion
SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics. The browser does not just show a picture, it "reads" the code and draws the image mathematically.
1. Vector graphics vs Raster
To understand the essence of SVG, you need to compare it with familiar formats (JPEG, PNG).
Raster graphics (JPEG, PNG, GIF): Consists of a grid of pixels. The image has a fixed resolution. When you zoom in, the pixels stretch, and "graininess" and blur appear.
Vector graphics (SVG): Consists of geometric primitives (points, lines, curves, polygons) described by mathematical formulas.
Why does SVG scale without loss?
Since the image is described by formulas (for example: "draw a circle with a radius of 50 at coordinates 10,10"), the browser redraws it anew with any change in screen size. This ensures perfect clarity on any display, including Retina, and at any zoom.
2. Typical use cases
SVG is the de facto standard for modern web development:
- Icons: The most common case. They are lightweight, clear, and their color can be changed via CSS.
- Illustrations: Flat graphics and drawn images (logos, banners).
- Graphs and charts: Libraries like D3.js generate SVG for data visualization.
- Animations: SVG can be animated via CSS or JavaScript (changing shape, moving along a path).
- UI elements: Loading spinners, complex button shapes, section dividers (waves).
3. Structure of an SVG document
Since SVG is XML, it can be opened in a text editor.
Basic example:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment: Draw a blue circle -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
Result:
Key elements:
<svg>: The root tag.width / height: The size of the viewing area on the screen.viewBox="min-x min-y width height": The most important attribute. It defines the internal coordinate system and proportions. Allows content to scale (be responsive).xmlns: Namespace (required for external files, optional for inline insertion in HTML5).- Primitives:
<rect>(rectangle),<circle>(circle),<text>(text),<path>(complex curve, the main tool for icons).
4. Ways to insert on a web page
The choice of method depends on whether you need to control the styles of the SVG.
A. Inline SVG (Inserting code into HTML)
The <svg>...</svg> code is inserted directly into the page markup.
- Pros: Full control via CSS (changing fill on :hover) and JS. No extra HTTP request.
- Cons: "Bloats" the HTML code, is not cached by the browser as a separate file.
B. <img> tag
<img src="icon.svg" alt="Icon">
- Pros: Caches, the code is clean.
- Cons: You cannot change the styles (color) inside the SVG via the page's CSS. No interactivity.
C. CSS background-image
.icon { background-image: url('icon.svg'); }
- Pros: Good for decorative elements.
- Cons: You cannot control the internal styles, bad for SEO (no alt text).
D. <object> or <iframe>
<object data="image.svg" type="image/svg+xml"></object>
- Pros: Allows you to load an external file, but retains the possibility of scripting interaction.
- Cons: Rarely used, has features with cross-domain security.
5. Limitations and disadvantages
Despite its power, SVG is not suitable for everything:
Scene complexity / Performance:
If there are thousands of small objects in an SVG (for example, a detailed world map or a complex CAD drawing), it is difficult for the browser to calculate and redraw the DOM nodes. This causes lags when scrolling or animating. For such tasks, <canvas> (raster rendering on the fly) is better suited.
Not for photos:
Vectorizing a photo will create a huge file with millions of paths. For photos, always use JPG/WebP.
Security (XSS):
SVG can contain embedded JavaScript. If you allow users to upload their own SVG files to the server, an attacker can embed a malicious script there.
Solution: Always "sanitize" (clean) SVG on the backend or use them only through the <img> tag (scripts are blocked there).