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
→ positionwidth
,height
→ sizerx
,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 pointsstroke
,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.
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.
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 (2)
valuable post.
Thankyou :)