SVG Fundamentals and Implementation

Knowing SVG syntax is step one; shipping SVG in production is step two. This learning activity connects structure to styling, covers when to inline or externalize files, introduces optimization, and compares common patterns (sprites, icon fonts, many small files) against real constraints like caching, theming, and build pipelines.

Presentation Attributes vs CSS

SVG elements can set geometry and paint with attributes (fill="blue", stroke-width="2") or with CSS rules. When both exist, CSS wins for presentation (per SVG and CSS cascade rules), except where specificity and inheritance interact in subtle ways.

        <style>
            .icon {
                fill: currentColor;
                stroke: currentColor;
                stroke-width: 1.5;
            }
            .icon--muted {
                opacity: 0.65;
            }
        </style>
        <svg class="icon icon--muted" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
    

For design systems, prefer minimal attributes in the source SVG and centralize fill/stroke in CSS so themes can swap palettes without editing every path.

Styling Inline SVG (Recommended for Theming)

When SVG markup lives in the HTML document, your stylesheets can target elements as usual:

        .nav__icon path {
            fill: currentColor;
        }

        .nav__link:hover .nav__icon {
            transform: scale(1.08);
        }

        .nav__icon {
            transition: transform 0.15s ease;
        }
    

You can animate individual paths or groups with CSS transitions and @keyframes, or use SMIL/CSS depending on requirements (CSS is usually preferred for consistency with the rest of your app).

External SVG as <img>

Using <img src="asset.svg" alt="..."> is simple and cache-friendly. Limitations:

• Internal SVG selectors in your CSS do not apply to the document inside the image (it is not in the same DOM tree as your page).
• You can still size the image, use object-fit, and apply filter to the whole graphic.
• For multicolor icons that must change per theme, you may need separate files, mask plus background-color tricks, or switch to inline SVG.

CSS Masks with External SVG (Monochrome Icons)

For a single-color treatment, you can treat an SVG as a mask so background-color supplies the visible ink:

        .icon-masked {
            width: 1.5rem;
            height: 1.5rem;
            background-color: var(--icon-color, CanvasText);
            mask: url("/icons/search.svg") center / contain no-repeat;
            mask-type: alpha;
        }
    

This works well for monochrome glyphs. Multicolor icons are still better as inline SVG or raster.

Sprites, Many Files, and HTTP/2

Classic advice was “bundle all icons into one sprite to reduce HTTP requests.” With HTTP/2 multiplexing, many small requests to the same origin are less painful than on HTTP/1.1. Sprites remain useful to:

• Avoid repeating large blocks of inline SVG in HTML.
• Share one cached resource across pages.
• Keep a single artifact for designers to update.

Conversely, per-icon files simplify caching invalidation (change one icon without busting the whole sprite) and can play well with component-level imports in bundlers. There is no universal answer; match your hosting, CDN, and build tool behavior.

Optimization (SVGO and Friends)

Exported SVG from design tools often includes metadata, editor IDs, and redundant groups. Tools like SVGO remove cruft, round coordinates, and shorten paths.

• Run SVGO in CI so every merge keeps files lean.
• Review aggressive transforms that might change visual appearance on thin strokes.
• Keep an unoptimized copy if designers need to re-edit.

Icon Fonts vs SVG Icons

Icon fonts map icons to Unicode code points in a custom font. Downsides:

• Screen readers may try to read glyphs as characters unless you hide them carefully.
• Users who override site fonts for readability can break icon fonts.
• Multicolor and precise alignment are harder than with SVG.

SVG icons are the modern default for new work. Keep font-based icons only when maintaining legacy or when a design system still ships a font (plan a migration path).

Responsive SVG

Fluid sizing typically combines viewBox with CSS:

        .logo {
            width: min(40vw, 200px);
            height: auto;
        }
    

For art direction (different crop at narrow widths), you can swap sources with <picture> or change which SVG file you serve; for icons, one viewBox usually suffices.

Security and CSP

SVG can contain scripts and external references. When accepting user-uploaded SVG, sanitize aggressively or rasterize. For first-party assets, serve over HTTPS and align with your Content Security Policy for images and fonts.

Implementation Checklist

1. Pick inline vs external based on whether you need CSS control of internal paths.
2. Use currentColor for single-color icons to inherit theme color.
3. Optimize SVG before production; automate in the build.
4. Name and describe for accessibility; hide decorative instances.
5. Test high-DPI, zoom, forced-colors, and keyboard focus for interactive controls.

What Comes Next

Unit 6 continues with advanced CSS: CSS Scroll Snap for scroll-driven layouts and Relative Color Syntax for deriving palettes from a base color. Your SVG knowledge pairs with those topics when you build polished, themeable interfaces for the capstone.