{"id":81060,"date":"2026-09-29T08:40:10","date_gmt":"2026-09-29T08:40:10","guid":{"rendered":"https:\/\/www.arimetrics.com\/?post_type=encyclopedia&#038;p=81060"},"modified":"2026-09-29T09:16:48","modified_gmt":"2026-09-29T09:16:48","slug":"svg","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/svg","title":{"rendered":"SVG"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-81061 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/svg-square.png\" style=\"margin-top:0;\" alt=\"SVG as a vector graphics format\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/svg-square.png 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2026\/09\/svg-square-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/> <strong>Definition:<\/strong> <strong>SVG<\/strong> is an open format for describing two-dimensional vector graphics through XML-based text. Its name stands for <em>Scalable Vector Graphics<\/em>, it commonly uses the <code>.svg<\/code> extension, and its MIME type is <code>image\/svg+xml<\/code>.<\/p>\n<p>Instead of storing a fixed grid of pixels, an SVG file defines shapes, coordinates, strokes, fills, text, and transformations. This allows <strong>vector graphics<\/strong> to adapt to different sizes without the pixelation caused by enlarging a raster image, although complexity and file size still depend on the content.<\/p>\n\n<h2>How SVG Works<\/h2>\n<p>The browser interprets the document&#8217;s elements and attributes to build a <strong>graphic scene<\/strong>. Shapes such as rectangles, circles, lines, and paths are positioned within a coordinate system and rendered at the resolution available on each screen or printed output.<\/p>\n<p>The <code>viewBox<\/code> attribute establishes the internal <strong>coordinate space<\/strong>, while width, height, and <code>preserveAspectRatio<\/code> affect how the graphic fits its container. Correct settings preserve proportions and make the image easier to adapt across sizes.<\/p>\n<p>The <a href=\"https:\/\/www.w3.org\/TR\/SVG2\/\" target=\"_blank\" rel=\"noopener\">SVG 2 specification<\/a> defines elements for geometry, text, color, gradients, clipping, masks, and filters. The format can also include raster images, animation, or scripts, so a file with an SVG extension does not necessarily contain only <strong>simple shapes<\/strong>.<\/p>\n<h2>File Structure<\/h2>\n<p>SVG uses <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/xml\">XML<\/a> syntax. The root <code>&lt;svg&gt;<\/code> element contains the graphic objects and can group them to share styles or transformations. Common <strong>SVG elements<\/strong> include:<\/p>\n<ul>\n<li><strong>Basic shapes:<\/strong> Rectangles, circles, ellipses, lines, polylines, and polygons.<\/li>\n<li><strong>Paths:<\/strong> The <code>&lt;path&gt;<\/code> element describes lines and curves through a sequence of commands.<\/li>\n<li><strong>Text:<\/strong> Characters remain selectable when they have not been converted into outlines.<\/li>\n<li><strong>Groups:<\/strong> They organize objects and apply shared attributes.<\/li>\n<li><strong>Definitions:<\/strong> Gradients, symbols, patterns, masks, and other reusable resources.<\/li>\n<\/ul>\n<p>Presentation can be declared through attributes or <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/css\">CSS<\/a>. When SVG is inserted directly into <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/html\">HTML<\/a>, its nodes become part of the document and can receive styles or interactions. When loaded through <code>&lt;img&gt;<\/code>, it behaves as an <strong>external image<\/strong> and the browser applies different restrictions.<\/p>\n<h2>Uses of SVG<\/h2>\n<p>The format is especially useful for graphics defined by geometry, flat colors, or elements that must appear at several sizes. Its <strong>common uses<\/strong> include:<\/p>\n<ul>\n<li><strong>Logos:<\/strong> Visual identities that must keep sharp edges across different media.<\/li>\n<li><strong>Icons:<\/strong> Interface symbols whose size or color may change.<\/li>\n<li><strong>Illustrations:<\/strong> Compositions built from shapes, strokes, text, and gradients.<\/li>\n<li><strong>Data graphics:<\/strong> Diagrams, maps, and visualizations with identifiable elements.<\/li>\n<li><strong>Animations:<\/strong> Attribute changes created with CSS, JavaScript, or native format features.<\/li>\n<\/ul>\n<p>SVG is not the best choice for every image. A detailed photograph may require an enormous number of shapes or an embedded raster image, removing the <strong>vector advantage<\/strong> and potentially increasing both file size and rendering cost.<\/p>\n<h2>Comparison With Other Formats<\/h2>\n<p>The choice depends on content type, compatibility, transparency, animation, and final weight. The <strong>main differences<\/strong> are:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/png\">PNG<\/a>:<\/strong> It represents a fixed pixel grid, preserves alpha transparency, and suits screenshots or raster graphics.<\/li>\n<li><strong>JPG:<\/strong> It compresses photographs by discarding information and does not support alpha transparency.<\/li>\n<li><strong>GIF:<\/strong> It uses a limited palette and can store simple frame-based animations.<\/li>\n<li><strong><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/webp\">WebP<\/a> and <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/avif\">AVIF<\/a>:<\/strong> These are modern raster formats with compression, transparency, and animation options.<\/li>\n<\/ul>\n<p>SVG stays sharp when its geometry is scaled, but that property does not guarantee a small file. A <strong>complex path<\/strong>, numerous filters, editing metadata, or embedded images can produce a heavier document than a well-prepared raster alternative.<\/p>\n<h2>SVG Accessibility<\/h2>\n<p>When SVG is used through <code>&lt;img&gt;<\/code>, the <code>alt<\/code> attribute supplies alternative text. An inline SVG can use <code>&lt;title&gt;<\/code>, <code>&lt;desc&gt;<\/code>, <code>role=\"img\"<\/code>, and ARIA relationships. The <strong>accessible description<\/strong> should reflect the graphic&#8217;s real purpose and avoid needlessly repeating nearby content.<\/p>\n<p>Text kept as text is easier to select, translate, and adapt than lettering converted to paths. However, textual elements alone do not guarantee accessibility. Reading order, contrast, focus, and an <strong>understandable alternative<\/strong> also matter for complex visualizations.<\/p>\n<h2>SVG Optimization<\/h2>\n<p>Optimizing SVG means removing unnecessary information without changing the result or discarding useful semantics. Recommended <strong>optimization steps<\/strong> include:<\/p>\n<ul>\n<li><strong>Clean metadata:<\/strong> Remove editor data, comments, and unused definitions.<\/li>\n<li><strong>Simplify paths:<\/strong> Reduce nodes and decimal precision when the visible shape does not change.<\/li>\n<li><strong>Reuse elements:<\/strong> Define shared symbols, styles, or resources instead of duplicating them.<\/li>\n<li><strong>Keep viewBox:<\/strong> Preserve a coordinate system that lets the graphic adapt.<\/li>\n<li><strong>Compress transfer:<\/strong> Minify the text and apply HTTP compression when appropriate.<\/li>\n<\/ul>\n<p>File size should be assessed together with rendering time and context. In <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/wpo\">WPO<\/a>, a lightweight SVG may avoid raster variants, while a complex scene may require more processing. Any third-party file should also be <strong>sanitized first<\/strong>, because the format can contain scripts, links, or external references depending on how it is loaded.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG is an XML-based vector format that stays sharp when scaled. Learn how it works, its uses, accessibility, and differences from PNG.<\/p>\n","protected":false},"author":6,"featured_media":81063,"template":"","encyclopedia-tag":[1340],"class_list":["post-81060","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","encyclopedia-tag-visual-creation"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/81060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media\/81063"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=81060"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=81060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}