A Simple Guide to SVG and How It Works

Hello, I'm Maneshwar. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.

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

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

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

1. Polygon (<polygon>)

• Attributes: points → list of x,y coordinate pairs

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

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

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>

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>

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

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.

Free DevTools: SVG Viewer

Here’s how the DEV logo looks in it:

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.

*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*

Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.

⭐ Star it on GitHub:

HexmosTech / git-lrc

Free, Unlimited AI Code Reviews That Run on Commit

| 🇩🇰 Dansk | 🇪🇸 Español | 🇮🇷 Farsi | 🇫🇮 Suomi | 🇯🇵 日本語 | 🇳🇴 Norsk | 🇵🇹 Português | 🇷🇺 Русский | 🇦🇱 Shqip | 🇨🇳 中文 |

git-lrc

Free, Unlimited AI Code Reviews That Run on Commit

 

     

---

AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.

See It In Action

See git-lrc catch serious security issues such as leaked credentials, expensive cloud operations, and sensitive material in log statements

git-lrc-intro-60s.mp4

Why

• 🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
• 🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
• 🔁 Build a…

View on GitHub

Comments

[Kamal Hinduja]

valuable post.

[Athreya aka Maneshwar]

Thankyou :)