Athreya aka Maneshwar

Posted on Sep 22

A Simple Guide to SVG and How It Works

#javascript #webdev #beginners #programming

Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.

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), SVG is resolution-independent and code-driven, meaning your graphics always stay sharp and lightweight.

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

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

What is SVG?

SVG stands for Scalable Vector Graphics.

It’s an XML-based format for describing 2D graphics using code.

Since it’s text-based, you can write SVG directly in HTML or store it as a .svg file.

For example:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

This code draws a blue circle with a radius of 40px at the center of a 100x100 canvas.

Why Use SVG?

Scalability → SVG graphics never pixelate, no matter the size.
Lightweight → Often smaller than PNG/JPEG for icons and simple illustrations.
CSS & JS Support → Style with CSS or animate with JavaScript.
Accessibility → Text inside SVG can be searchable and selectable.
SEO Friendly → SVG can contain meaningful markup for search engines.

Common SVG Elements and Attributes

Basic Shape Elements

Rectangle (<rect>)

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

   <rect x="10" y="10" width="100" height="50" rx="10" ry="10" fill="green" />

Line (<line>)

Attributes: x1, y1, x2, y2 → start and end points stroke, stroke-width

   <line x1="0" y1="0" x2="100" y2="100" stroke="green" stroke-width="2" />

Polygon (<polygon>)

Attributes: points → list of x,y coordinate pairs

   <polygon points="50,10 90,90 10,90" fill="orange" />

Advanced Elements

Path (<path>)

Attribute: d → path data (M = move, L = line, C = curve, Z = close path)

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

Text (<text>)

Attributes: x, y, font-family, font-size, text-anchor

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

Group (<g>)

Groups multiple elements, supports transformations, styling, and class/id.

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

Defs (<defs>)

Defines reusable elements like gradients, patterns, symbols.

   <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)" />

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 copy-paste SVG into your browser manually every time.

Try my Free SVG Viewer Online Tool: paste the code and preview instantly.