feat: add inline_svg shortcode

This commit is contained in:
st1020 2025-07-20 16:10:11 +08:00
parent b869da36fb
commit 4bfc2728dc
23 changed files with 198 additions and 115 deletions

View file

@ -0,0 +1,12 @@
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373"
height="373" width="496">
<g fill="none">
<path stroke="#000" stroke-width=".75"
d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path>
<path stroke="#ED1C24" stroke-width=".75"
d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path>
<path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path>
<ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse>
<ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse>
</g>
</svg>

After

Width:  |  Height:  |  Size: 761 B

View file

@ -168,3 +168,43 @@ It's from [Zola documentation](https://www.getzola.org/documentation/content/ima
```
{{ gallery() }}
## Inline SVG
The `inline_svg()` shortcode is used to embed SVG images directly into a webpage, rather than including them via an `<img>` tag.
You can use the `inline_svg()` shortcodes like:
```markdown
{%/* inline_svg() */%}
![Van de Graaf canon](Van_de_Graaf_canon_in_book_design.svg)
{%/* end */%}
```
{% inline_svg() %}
![Van de Graaf canon](Van_de_Graaf_canon_in_book_design.svg)
{% end %}
If you don't want to display a caption below the image, you can set the Markdown image `alt` text to an empty string, `Inline SVG`, `inline-svg`, or `inline_svg`.
```markdown
{%/* inline_svg() */%}
![](Van_de_Graaf_canon_in_book_design.svg)
{%/* end */%}
{%/* inline_svg() */%}
![Inline SVG](Van_de_Graaf_canon_in_book_design.svg)
{%/* end */%}
{%/* inline_svg() */%}
![inline-svg](Van_de_Graaf_canon_in_book_design.svg)
{%/* end */%}
{%/* inline_svg() */%}
![inline_svg](Van_de_Graaf_canon_in_book_design.svg)
{%/* end */%}
```
{% inline_svg() %}
![](Van_de_Graaf_canon_in_book_design.svg)
{% end %}