SVG Shape Example

SVG Shape Display

Here’s an example of displaying SVG shapes directly in a Hugo markdown post.

Inline SVG Example

You can embed SVG directly in your markdown:

SVG Shapes

Styled SVG with CSS

You can also style SVG elements with CSS:

Complex SVG Shape

Here’s a more complex example - a simple house:

Tips for SVG in Hugo

1. Inline SVG works great for simple shapes and when you need direct control
2. External SVG files can be stored in the static folder and referenced with ![Alt text](/path/to/image.svg)
3. Hugo shortcodes can make complex SVG reusable across multiple posts
4. SVG is scalable and looks crisp on all screen sizes
5. You can use CSS to style and animate SVG elements