Basics

Learn the core concepts for inlining SVGs in Hugo: where to place files, how to use shortcodes and partials, style output, and improve accessibility.

Placement

Understand where SVG files belong in Hugo, when to use page resources or global assets, and how to reference logos and icons with reliable paths.

Accessibility

Make inline SVGs accessible with meaningful titles, descriptions, roles, and ARIA attributes so assistive technologies can understand icons clearly.

Styling

Style inline SVG output with reusable CSS classes and direct SVG attributes, controlling size, stroke, fill, and presentation for consistent branding.

Shortcode

Use the inline-svg shortcode in Markdown content to insert icons and SVG files with configurable arguments for accessibility, sizing, and styling.

Partial

Use the inline-svg partial to render icons and SVG assets in templates with flexible arguments for accessibility, sizing, classes, and attributes.