DEV Community

Cover image for A Simple Guide to SVG and How It Works
Athreya aka Maneshwar
Athreya aka Maneshwar

Posted on

A Simple Guide to SVG and How It Works

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>
Enter fullscreen mode Exit fullscreen mode

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

  1. 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" />
Enter fullscreen mode Exit fullscreen mode

  1. 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" />
Enter fullscreen mode Exit fullscreen mode

  1. Polygon (<polygon>)
  • Attributes: points → list of x,y coordinate pairs
   <polygon points="50,10 90,90 10,90" fill="orange" />
Enter fullscreen mode Exit fullscreen mode

Advanced Elements

  1. 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" />
Enter fullscreen mode Exit fullscreen mode

  1. 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>
Enter fullscreen mode Exit fullscreen mode

  1. 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>
Enter fullscreen mode Exit fullscreen mode

  1. 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)" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Free DevTools: SVG Viewer

Here’s how the DEV logo looks in it:

Dev svg in Free DevTool SVG Viewer Online

Final Thoughts

SVG is a developer’s dream format: flexible, scalable, and powerful.

With just a few lines of code, you can create logos, icons, charts, and even animations — all without losing quality.

Next time you need a crisp, scalable graphic, reach for SVG instead of a static PNG.

FreeDevTools

I’ve been building for FreeDevTools.

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.

Top comments (0)