Hero

SVG in HTML Discover the magic of Scalable Vector Graphics (SVG) and learn how to write crisp, infinitely scalable icons and illustrations directly in your HTML code. Learning Outcomes: Understand what SVGs are, why they are superior for UI elements, and how to embed them. Prerequisites: Basic HTML tags and understanding of coordinate systems. Reading Time: 4 min read Difficulty: Intermediate

Introduction

Images on the web (like JPGs and PNGs) are made up of tiny colored squares called pixels. If you zoom in on them, they get blurry and blocky. Scalable Vector Graphics (SVG), on the other hand, are drawn using math. Because they are defined by mathematical formulas (lines, circles, curves), you can scale an SVG to the size of a billboard and it will remain perfectly crisp!

Why This Matters

For a high-end portfolio like himubey.in, blurry icons are unacceptable. Whether it's the GitHub logo in your footer, a search icon in your navbar, or a complex hero illustration, SVGs guarantee a premium, retina-ready display on any device, while taking up a fraction of the file size of a traditional image.

Core Concepts

Because SVGs are based on math, they are actually written in XML (which looks almost identical to HTML). This means you can literally copy and paste the code of an image directly into your HTML document!

Key SVG shape elements:

<circle>: Draws a perfect circle based on a center point and radius.
<rect>: Draws a rectangle or square.
<path>: The most powerful element; draws complex custom shapes using coordinates.

Syntax

Every inline SVG must be wrapped in the <svg> tag, defining its width and height.

<svg width="100" height="100">
  <!-- cx/cy = center coordinates, r = radius, fill = color -->
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Real World Example

Let's build a simple, beautiful "Code Brackets" logo for the Learn with Himanshu platform using pure SVG code.

<section class="brand-logo">
  <h2>Himubey Learn Logo</h2>
  
  <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <!-- Background Circle -->
    <circle cx="60" cy="60" r="50" fill="#2563eb" />
    
    <!-- Code Brackets Text -->
    <text x="60" y="75" font-size="40" font-family="monospace" font-weight="bold" fill="white" text-anchor="middle">
      &lt;/&gt;
    </text>
  </svg>
</section>

(Notice the viewBox attribute? It defines the internal coordinate system of the SVG, allowing it to scale beautifully if you change the outer width and height!)

Best Practices

Use Inline SVG for Icons: Instead of linking to an SVG file using an <img> tag, paste the <svg> code directly into your HTML. This allows you to change the color of the icon dynamically using CSS (e.g., changing a black icon to white in dark mode!).
Optimize Your SVGs: SVGs exported from design tools like Figma or Adobe Illustrator often contain junk code. Always run your SVGs through an optimizer (like SVGOMG) before putting them in your code.

Common Mistakes

Mistake: Trying to use an SVG for a highly detailed photograph.

<!-- WRONG: SVGs are for logos, icons, and flat illustrations. Math cannot efficiently recreate a complex photo of a human face! -->

Correct Approach:

<!-- CORRECT: Use JPG or WebP for photos, and SVG for icons/logos! -->

💡 Himubey Tip

When you paste an inline SVG into your HTML, try adding the CSS class fill-current (if using Tailwind) or setting fill="currentColor" in the SVG tag. This makes the SVG magically inherit the text color of its parent element, making hover effects a breeze!

Interview Questions

What does SVG stand for, and how does it differ from a PNG or JPG?
Why is an inline <svg> tag often preferred over putting an SVG inside an <img> tag?
What is the purpose of the viewBox attribute?

Mini Challenge

Task: Draw a custom square!

Create an <svg> tag with a width and height of 200.
Inside it, use the <rect> tag to draw a square.
Give the <rect> a width of 100, a height of 100, and a fill of your favorite color!

Summary

SVGs are a frontend developer's best friend. By rendering graphics through mathematical code rather than pixels, you guarantee that your UI elements remain razor-sharp on any screen. Mastering inline SVGs opens the door to advanced CSS styling and jaw-dropping animations.

Next Lesson

Next Lesson: HTML iFrames