A Simple Guide to SVG and How It Works

When building logos, icons, or illustrations for the web, SVG (Scalable Vector Graphics) is one of the most powerful tools in a developer’s toolkit.

Unlike raster images (PNG, JPEG, WebP), SVG is mostly resolution-independent and code-driven, meaning your graphics almost always stay sharp, lightweight, and infinitely scalable without quality loss.

In this post, we’ll explore how SVG works, its benefits, common elements, and attributes.

Along the way, we’ll also create a logo using SVG and test it with an online SVG preview tool.

What is SVG?

SVG stands for Scalable Vector Graphics, an XML-based format for describing 2D graphics using code instead of pixels.

Unlike bitmap formats (which store color data for each pixel), SVG uses mathematical instructions, lines, curves, coordinates — to describe shapes.

Because it’s text-based, you can embed SVG directly inside HTML or store it as a separate .svg file and reference it with an <img> tag, <object>, or <iframe>.

Example:

<svg width="500" height="350" viewBox="0 0 200 350">
  <circle cx="100" cy="170" r="80" fill="black" />
</svg>

This code draws a blue circle with a radius of 40px at the center of a 100×100 canvas.
Resize it to any scale — it stays sharp.

Why Use SVG?

SVG brings together the precision of design tools and the flexibility of code.

Here’s why developers and designers love it:

• Scalability: SVGs stay crisp on every screen (no pixelation, no blurring).
• Lightweight: For icons, UI graphics, and shapes, they’re often smaller than PNGs.
• CSS & JS Integration: You can color, animate, or manipulate SVGs like regular HTML elements.
• Accessibility: Text within an SVG is selectable and can be read by screen readers.
• SEO Friendly: Search engines can index embedded text and metadata.
• Editable: Since SVG is XML, you can open it in a text editor, tweak it, and version-control it easily.

How SVG Works Internally

When the browser loads an SVG, it parses the XML markup and builds a DOM tree, just like HTML.

Each shape (like <rect> or <circle>) becomes a DOM node, and the browser’s renderer converts it into vector instructions for the GPU to draw.

SVG rendering goes through these main steps:

1. Parsing XML: Converts text into a structured DOM.
2. Styling and layout: Applies CSS rules, transforms, and styles.
3. Rasterization: Converts vector paths into pixels for display.
4. Interaction hooks: Enables event handling (onClick, hover, etc.) via the DOM.

This DOM-based model is what allows developers to dynamically manipulate SVGs with JavaScript — unlike raster formats, which are static.

Common SVG Elements and Attributes

Basic Shape Elements

1. Rectangle (<rect>)

Attributes:
x, y → position
width, height → size
rx, ry → rounded corners

<svg width="500" height="350" viewBox="0 0 200 350">
  <rect x="-150" y="70" width="500" height="200" fill="yellow" />
  <circle cx="100" cy="170" r="80" fill="black" />
</svg>

3. Polygon (<polygon>)

Attributes:
points → list of coordinate pairs

<svg width="500" height="350" viewBox="0 0 200 350" >
  <rect x="-150" y="70" width="500" height="200" fill="yellow" />
  <circle cx="100" cy="170" r="80" fill="black" />

  <polygon points="125,150 140,175 110,175" fill="red" />
  <polygon points="75,150 90,175 60,175" fill="red" />

</svg>

4. Ellipse (<ellipse>)

Attributes:
cx, cy → center coordinates
rx, ry → horizontal and vertical radii
fill, stroke, stroke-width → color and outline options

<svg width="500" height="350" viewBox="0 0 200 350">
  <!-- Background rectangle -->
  <rect x="-150" y="70" width="500" height="200" fill="yellow" />

  <!-- Head -->
  <circle cx="100" cy="170" r="80" fill="black" />

  <!-- Eyes using ellipses -->
  <ellipse cx="60" cy="150" rx="15" ry="20" fill="red" />
  <ellipse cx="130" cy="150" rx="15" ry="20" fill="red" />
</svg>

Advanced Elements

1. Path (<path>)

The most flexible and complex SVG element.
The d attribute defines a set of drawing commands (like M = move, L = line, C = curve, Z = close path).

<path d="M10 80 C 40 10, 65 10, 95 80" stroke="blue" fill="transparent" />

2. Text (<text>)

SVG supports real, selectable text.

<text x="50" y="50" font-size="24" text-anchor="middle" fill="black">
  Hello SVG
</text>

3. Group (<g>)

Use <g> to group multiple elements for transformations or collective styling.

<g transform="translate(50,50)">
  <circle r="30" fill="purple" />
  <text x="0" y="5" text-anchor="middle" fill="white">G</text>
</g>

4. Defs (<defs>) and Reuse

<defs> stores reusable definitions — gradients, symbols, filters, patterns.

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
    <stop offset="100%" style="stop-color:red;stop-opacity:1" />
  </linearGradient>
</defs>
<rect width="200" height="100" fill="url(#grad1)" />

You can reference elements from <defs> anywhere in your SVG using <use xlink:href="#id" />, helping you build icon systems efficiently.

Example: Building the DEV Logo in SVG

Let’s recreate the DEV logo (black rounded square, white border, and white text).

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 512 512">
  <!-- White border -->
  <rect width="512" height="512" rx="40" ry="40" fill="white"/>

  <!-- Black box inside -->
  <rect x="20" y="20" width="472" height="472" rx="30" ry="30" fill="black"/>

  <!-- DEV text -->
  <text x="50%" y="50%"
        font-family="Arial, Helvetica, sans-serif"
        font-size="200"
        font-weight="bold"
        fill="white"
        text-anchor="middle"
        dominant-baseline="middle">
    DEV
  </text>
</svg>

You don’t have to manually paste SVG into a browser every time.
Try the Free SVG Viewer Online Tool to instantly preview your code:

👉 Free DevTools: SVG Viewer

Here’s how the DEV logo looks inside it:

SVG vs Raster Formats (PNG, JPEG, WebP)

Key takeaway:

• SVG shines for simple, vector-based graphics like icons and logos.
• WebP or AVIF outperform SVG for photographic or complex visuals.

Performance and Optimization Tips

Even though SVGs are text-based, they can get large if exported directly from design tools. Here’s how to keep them light:

• Run SVGO: removes comments, metadata, and unnecessary precision.
• Simplify paths: fewer nodes mean smaller size and faster render.
• Minimize inline styles: reuse CSS classes.
• Compress with gzip or brotli: SVG text compresses extremely well.
• Inline small SVGs in HTML for fewer HTTP requests.
• Lazy-load decorative SVGs that aren’t immediately visible.

Example SVGO CLI:

npx svgo input.svg -o output.min.svg

Accessibility and Security

• Use <title> and <desc> inside SVG for screen readers.
• Add role="img" and aria-label="..." for descriptive accessibility.
• Never accept untrusted SVG uploads without sanitization — SVG supports scripts, external resources, and embedded links, which can be abused.
  • Use tools like DOMPurify or sanitize-html.
  • Or convert uploads to PNG/WebP server-side.

Final Thoughts

SVG is more than just an image format, it’s a mini markup language for graphics.

With a few lines of XML, you can craft shapes, gradients, animations, and entire icon systems that scale perfectly on every screen.

Whether you’re building a responsive logo, an animated loader, or a full UI icon set, SVG keeps your visuals crisp, lightweight, and easy to maintain.

Next time you need a graphic that scales beautifully, skip the static PNG and reach for SVG.

A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.

Any feedback or contributors are welcome!

It’s online, open-source, and ready for anyone to use.

👉 Check it out: FreeDevTools
⭐ Star it on GitHub: freedevtools

Let’s make it even better together.