Images & Graphics

Inline SVG & Vector Graphics

Master Scalable Vector Graphics for crisp, resolution-independent images. Learn to create, style, animate, and optimize SVG for modern web applications.

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format that scales perfectly to any size without losing quality. Unlike raster images (JPEG, PNG), SVG defines shapes mathematically.

Why Use SVG?

âœ… Scalable: Perfect quality at any size (no pixelation)
âœ… Small file size: Especially for simple graphics
âœ… Editable: Modify with CSS and JavaScript
âœ… Accessible: Text remains searchable and screen-reader friendly
âœ… Animatable: CSS and JavaScript animations
âœ… SEO-friendly: Text content is indexable

Basic SVG Structure

HTML
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content goes here --&gt;
</svg>

<!-- Key attributes: --&gt;
<!-- width/height: Display size (can use CSS units) --&gt;
<!-- viewBox: "x y width height" - defines coordinate system --&gt;
<!-- xmlns: XML namespace (required for validation) --&gt;

Basic Shapes

1. Rectangle

HTML
<svg width="200" height="100">
    <!-- Basic rectangle --&gt;
    <rect x="10" y="10" width="180" height="80" fill="blue" />
    
    <!-- Rounded corners --&gt;
    <rect x="10" y="10" width="100" height="80" 
          rx="10" ry="10" 
          fill="green" stroke="black" stroke-width="2" />
</svg>

2. Circle

HTML
<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="red" />
    
    <!-- cx, cy: center coordinates --&gt;
    <!-- r: radius --&gt;
</svg>

3. Ellipse

HTML
<svg width="200" height="150">
    <ellipse cx="100" cy="75" rx="80" ry="50" fill="purple" />
    
    <!-- rx: horizontal radius --&gt;
    <!-- ry: vertical radius --&gt;
</svg>

4. Line

HTML
<svg width="200" height="100">
    <line x1="10" y1="10" x2="190" y2="90" 
          stroke="black" stroke-width="2" />
    
    <!-- (x1,y1): start point --&gt;
    <!-- (x2,y2): end point --&gt;
</svg>

5. Polyline

HTML
<svg width="200" height="150">
    <polyline points="10,10 50,50 90,30 130,70 170,40" 
              fill="none" stroke="blue" stroke-width="2" />
    
    <!-- Connects multiple points (not closed) --&gt;
</svg>

6. Polygon

HTML
<svg width="200" height="200">
    <!-- Triangle --&gt;
    <polygon points="100,20 20,180 180,180" fill="orange" />
    
    <!-- Automatically closes path --&gt;
</svg>

7. Path (Most Powerful)

HTML
<svg width="200" height="200">
    <path d="M 10 10 L 190 10 L 100 190 Z" 
          fill="green" stroke="black" stroke-width="2" />
    
    <!-- Path commands: --&gt;
    <!-- M: Move to --&gt;
    <!-- L: Line to --&gt;
    <!-- H: Horizontal line --&gt;
    <!-- V: Vertical line --&gt;
    <!-- C: Cubic BÃ©zier curve --&gt;
    <!-- Q: Quadratic BÃ©zier curve --&gt;
    <!-- A: Arc --&gt;
    <!-- Z: Close path --&gt;
</svg>

Text in SVG

HTML
<svg width="300" height="100">
    <!-- Basic text --&gt;
    <text x="10" y="30" font-family="Arial" font-size="24" fill="black">
        Hello SVG!
    </text>
    
    <!-- Text along a path --&gt;
    <path id="curve" d="M 50 80 Q 150 10 250 80" fill="none" />
    <text>
        <textPath href="#curve">
            Text follows this curve!
        </textPath>
    </text>
</svg>

Styling SVG

Inline Attributes

HTML
<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" 
            fill="blue" 
            stroke="red" 
            stroke-width="3" 
            opacity="0.7" />
</svg>

CSS Styling

HTML
<style>
.my-circle {
    fill: blue;
    stroke: red;
    stroke-width: 3;
    transition: fill 0.3s;
}

.my-circle:hover {
    fill: green;
    cursor: pointer;
}
</style>

<svg width="200" height="200">
    <circle class="my-circle" cx="100" cy="100" r="50" />
</svg>

Gradients

Linear Gradient

HTML
<svg width="300" height="200">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    
    <rect x="10" y="10" width="280" height="180" fill="url(#grad1)" />
</svg>

Radial Gradient

HTML
<svg width="200" height="200">
    <defs>
        <radialGradient id="grad2">
            <stop offset="0%" style="stop-color:white" />
            <stop offset="100%" style="stop-color:blue" />
        </radialGradient>
    </defs>
    
    <circle cx="100" cy="100" r="80" fill="url(#grad2)" />
</svg>

Patterns & Filters

Pattern

HTML
<svg width="300" height="200">
    <defs>
        <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="3" fill="red" />
        </pattern>
    </defs>
    
    <rect width="300" height="200" fill="url(#dots)" />
</svg>

Drop Shadow Filter

HTML
<svg width="200" height="200">
    <defs>
        <filter id="shadow">
            <feDropShadow dx="4" dy="4" stdDeviation="4" flood-opacity="0.5"/>
        </filter>
    </defs>
    
    <circle cx="100" cy="100" r="50" fill="blue" filter="url(#shadow)" />
</svg>

SVG Animation

CSS Animation

HTML
<style>
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: rotate 2s linear infinite;
    transform-origin: center;
}
</style>

<svg width="200" height="200">
    <circle class="spinning" cx="100" cy="100" r="50" fill="blue" />
</svg>

SMIL Animation (Native SVG)

HTML
<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="red">
        <animate attributeName="r" 
                 from="50" to="80" 
                 dur="1s" 
                 repeatCount="indefinite" 
                 direction="alternate" />
    </circle>
</svg>

JavaScript Animation

HTML
<svg id="my-svg" width="200" height="200">
    <circle id="my-circle" cx="100" cy="100" r="50" fill="green" />
</svg>

<script>
const circle = document.getElementById('my-circle');
let radius = 50;
let growing = true;

function animate() {
    if (growing) {
        radius += 0.5;
        if (radius >= 80) growing = false;
    } else {
        radius -= 0.5;
        if (radius <= 50) growing = true;
    }
    circle.setAttribute('r', radius);
    requestAnimationFrame(animate);
}
animate();
</script>

Using SVG in HTML

1. Inline SVG (Best)

HTML
<svg width="50" height="50">
    <circle cx="25" cy="25" r="20" fill="blue" />
</svg>

<!-- Pros: Full CSS/JS access, no HTTP request --&gt;
<!-- Cons: Increases HTML size --&gt;

2. External File (img tag)

HTML
<img src="icon.svg" alt="Icon" width="50" height="50">

<!-- Pros: Cacheable, clean HTML --&gt;
<!-- Cons: No CSS/JS styling, extra HTTP request --&gt;

3. CSS Background

HTML

.icon {
    width: 50px;
    height: 50px;
    background-image: url('icon.svg');
    background-size: contain;
}

<!-- Pros: CSS control, cacheable --&gt;
<!-- Cons: No DOM access --&gt;

4. Object/Embed

HTML
<object data="graphic.svg" type="image/svg+xml" width="300" height="200">
    <img src="fallback.png" alt="Fallback">
</object>

<!-- Pros: Full SVG features, fallback support --&gt;
<!-- Cons: More complex, extra HTTP request --&gt;

5. Data URL

HTML
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='20' fill='blue'/%3E%3C/svg%3E" alt="Icon">

<!-- Pros: No HTTP request --&gt;
<!-- Cons: Not cacheable, increases HTML size --&gt;

Responsive SVG

Flexible Sizing

HTML
<!-- Remove width/height, keep viewBox for flexible sizing --&gt;
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<style>
svg {
    width: 100%; /* Scales with container */
    height: auto;
    max-width: 500px;
}
</style>

Preserve Aspect Ratio

HTML
<svg viewBox="0 0 100 50" preserveAspectRatio="xMidYMid meet">
    <!-- Content --&gt;
</svg>

<!-- preserveAspectRatio options: --&gt;
<!-- meet: Scale to fit (like background-size: contain) --&gt;
<!-- slice: Scale to fill (like background-size: cover) --&gt;
<!-- xMidYMid: Center horizontally and vertically --&gt;
<!-- none: Stretch to fill --&gt;

Accessibility

HTML
<svg role="img" aria-labelledby="title desc" width="100" height="100">
    <title id="title">Company Logo</title>
    <desc id="desc">A blue circle with white text</desc>
    
    <circle cx="50" cy="50" r="40" fill="blue" />
    <text x="50" y="55" text-anchor="middle" fill="white">Logo</text>
</svg>

<!-- For decorative SVG: --&gt;
<svg aria-hidden="true" focusable="false">
    <!-- Decorative content --&gt;
</svg>

Optimization

Manual Optimization:

Remove unnecessary metadata
Simplify paths
Combine similar shapes
Use symbols for repeated elements
Remove hidden/invisible elements
Minify (remove whitespace)

Tools:

SVGO: Command-line optimizer
SVGOMG: Web-based interface for SVGO
ImageOptim: Mac app with SVG support
Webpack/Vite plugins: Automatic optimization

Before Optimization
HTML
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In ... --&gt;
    <metadata>...</metadata>
    <g id="Layer_1">
        <circle cx="50" cy="50" r="40" fill="#0000FF" />
    </g>
</svg>

After Optimization
HTML
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="#00f"/>
</svg>

Best Practices

âœ… Do

Use SVG for logos, icons, illustrations
Optimize SVGs before deployment
Use viewBox for responsive sizing
Inline critical SVGs to avoid HTTP requests
Add title and desc for accessibility
Use CSS for styling when possible
Compress SVG files (gzip)
Use symbols for repeated graphics

âŒ Don't

Use SVG for photographs
Inline large/complex SVGs
Forget to optimize/minify
Use fixed width/height for responsive
Leave editor metadata in production
Overcomplicate simple graphics
Forget accessibility attributes
Use SVG when PNG/WebP is better

What's Next?

Explore the HTML5 Canvas API for dynamic, JavaScript-powered graphics.

Next: Canvas Element â†’