How to Use SVG in Hugo
Inline and manage SVG graphics in Hugo static sites using readFile, partial templates, and reusable icon shortcodes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Inlining SVG Files in Hugo Templates
Hugo's readFile function lets you inline the contents of an SVG file directly into your HTML output at build time, avoiding an extra HTTP request. This is commonly wrapped in a partial template that accepts an icon name parameter for reuse across the site.
- readFile function inlines SVG content directly at build time
- Wrap in a partial to create a reusable icon-name-based system
- Inlined SVG avoids extra network requests for small icon graphics
Building a Reusable SVG Icon System
Store SVG icon files in a static/icons or assets/icons directory, then create a partial like icon.html that reads the requested icon file and outputs it inline, allowing consistent icon usage across templates with simple shortcode-style calls.
- Organize icons in a dedicated assets folder for easy management
- Partial accepts an icon name and outputs the matching inline SVG
- CSS classes on the partial output allow consistent icon styling
Frequently Asked Questions
Why inline SVG instead of using an img tag in Hugo?
Inlining via readFile lets you style the SVG with CSS (fill, stroke) and avoids an extra HTTP request, which matters for icon-heavy static sites optimizing for performance.
Can Hugo minify inlined SVG automatically?
Hugo's built-in minification (when enabled) processes HTML output including inlined SVG, but for best results pre-optimize SVG files with SVGO before adding them to your assets folder.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG