search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
45.82k stars 2.41k forks source link

Astro ignores svg images style tag #11309

Closed samuelhulla closed 3 months ago

samuelhulla commented 3 months ago

Astro Info

Astro                    v4.8.6
Node                     v20.7.0
System                   macOS (arm64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/solid-js
                         @astrojs/mdx

Note: in the code section here I used tailwind and mdx integrations, but as you can see in my minimal reproducable example, this happens even at the vanilla version of astro.

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When using a .svg file with a <style> tag, like the one in the example with font-family definition, astro seems to strap it clean of these tags and just defaults to whatever my default font is.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.6640625 142.3648681640625" width="311.6640625" height="142.3648681640625" filter="invert(93%) hue-rotate(180deg)">
  <!-- svg-source:excalidraw -->

  <defs>
    <style class="style-fonts">
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
      @font-face {
        font-family: "Assistant";
        src: url("https://excalidraw.com/Assistant-Regular.woff2");
      }
    </style>

  </defs>
  <g stroke-linecap="round" transform="translate(10 60.267578125) rotate(0 145.427734375 35.8359375)"><path d="M17.92 0 C118.67 -0.8, 220.45 -0.28, 272.94 0 M17.92 0 C89.54 0.91, 161.15 1.14, 272.94 0 M272.94 0 C285.37 1.09, 290.19 4.53, 290.86 17.92 M272.94 0 C282.98 0.25, 289.99 7.74, 290.86 17.92 M290.86 17.92 C290.02 25.5, 289.33 34.71, 290.86 53.75 M290.86 17.92 C290.2 30.87, 290.43 42.75, 290.86 53.75 M290.86 53.75 C291.55 67.66, 284.43 70.14, 272.94 71.67 M290.86 53.75 C291.64 63.77, 286.92 69.68, 272.94 71.67 M272.94 71.67 C188.37 74.1, 102.78 73.97, 17.92 71.67 M272.94 71.67 C181.63 73.5, 92.43 72.96, 17.92 71.67 M17.92 71.67 C4.01 72.07, 1.57 67.03, 0 53.75 M17.92 71.67 C7.76 72.96, 1.52 64.61, 0 53.75 M0 53.75 C-1.86 42.93, -0.82 34.72, 0 17.92 M0 53.75 C0.14 44.06, 0.42 32.78, 0 17.92 M0 17.92 C-1.82 4.62, 4.62 -0.74, 17.92 0 M0 17.92 C-1.86 4.83, 3.74 -1.1, 17.92 0" stroke="#1e1e1e" stroke-width="1" fill="none"></path></g><g transform="translate(18.03515625 10) rotate(0 96.19989776611328 12.5)"><text x="0" y="17.52" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Procedure definition</text></g><g stroke-linecap="round" transform="translate(10.39453125 63.7359619140625) rotate(0 44.923828125 33.70703125)"><path d="M16.85 0 C28.55 1.94, 41.23 0.05, 72.99 0 M16.85 0 C30.92 1.38, 46.13 1.09, 72.99 0 M72.99 0 C85.8 0.04, 91.74 4.11, 89.85 16.85 M72.99 0 C83.17 1.16, 90.25 7.1, 89.85 16.85 M89.85 16.85 C91.37 28.85, 91.51 39.99, 89.85 50.56 M89.85 16.85 C89.77 28.58, 90.19 39.56, 89.85 50.56 M89.85 50.56 C90.8 62.77, 85.78 68.11, 72.99 67.41 M89.85 50.56 C90.51 62.16, 85.57 69.64, 72.99 67.41 M72.99 67.41 C60.01 68.1, 48 67.56, 16.85 67.41 M72.99 67.41 C60.87 66.84, 49.59 66.65, 16.85 67.41 M16.85 67.41 C7.16 67.88, -1.24 61.05, 0 50.56 M16.85 67.41 C7.02 68.21, 1.4 60.58, 0 50.56 M0 50.56 C-1.43 38.39, -1.89 25.54, 0 16.85 M0 50.56 C-0.24 41.51, 0.28 32.92, 0 16.85 M0 16.85 C-1.6 7.23, 5.72 1.85, 16.85 0 M0 16.85 C-0.6 6.66, 7.16 -1.47, 16.85 0" stroke="#1e1e1e" stroke-width="1" fill="none"></path></g><g transform="translate(18.0859375 77.5484619140625) rotate(0 37.119972229003906 20)"><text x="0" y="14.016" font-family="Virgil, Segoe UI Emoji" font-size="16px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">procedure</text><text x="0" y="34.016" font-family="Virgil, Segoe UI Emoji" font-size="16px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">name</text></g><g stroke-linecap="round" transform="translate(102.1171875 63.8726806640625) rotate(0 99.7734375 34.24609375)"><path d="M2.72 6.34 C2.72 6.34, 2.72 6.34, 2.72 6.34 M2.72 6.34 C2.72 6.34, 2.72 6.34, 2.72 6.34 M1.14 14.24 C3.2 12.76, 6.5 9.17, 9.67 4.43 M1.14 14.24 C4.5 10.93, 7.75 7.15, 9.67 4.43 M1.54 19.89 C8.24 16.18, 12.08 7.21, 17.94 1.02 M1.54 19.89 C8.59 11.99, 14.66 4.72, 17.94 1.02 M1.27 26.28 C9.3 20.72, 15.65 12.6, 23.58 0.62 M1.27 26.28 C9.43 17.86, 17.81 8.54, 23.58 0.62 M1.01 32.68 C7.63 25.47, 12.38 17.13, 28.57 0.98 M1.01 32.68 C9.03 22.3, 18.88 12.11, 28.57 0.98 M1.41 38.32 C8.76 29.06, 14.81 23.43, 34.21 0.59 M1.41 38.32 C15.28 22.57, 28.12 8.65, 34.21 0.59 M1.15 44.72 C11.92 30.71, 25.86 18.96, 39.2 0.95 M1.15 44.72 C16.54 26.89, 30.63 11.12, 39.2 0.95 M1.54 50.37 C15.63 38.31, 25.54 24.8, 44.84 0.55 M1.54 50.37 C16.03 34.21, 31.88 16.15, 44.84 0.55 M1.28 56.76 C18.5 34.82, 37.21 11.95, 49.83 0.91 M1.28 56.76 C16.8 39.14, 31.8 22.8, 49.83 0.91 M2.99 60.9 C20.18 43.55, 33.06 24.91, 55.47 0.52 M2.99 60.9 C21.99 38.95, 41.29 17, 55.47 0.52 M5.35 64.28 C27.41 42.42, 47.16 16.23, 60.46 0.88 M5.35 64.28 C25.36 41.52, 44.09 18.33, 60.46 0.88 M8.37 66.9 C20.5 50.62, 35.84 33.16, 66.1 0.49 M8.37 66.9 C28.08 44.54, 48.38 21.06, 66.1 0.49 M11.39 69.52 C31.81 45.65, 57.37 17.98, 71.09 0.85 M11.39 69.52 C30.13 49.46, 46.93 27.49, 71.09 0.85 M17.69 68.37 C33.38 52.26, 50.03 32.89, 76.08 1.21 M17.69 68.37 C31.4 52.53, 44.96 38.06, 76.08 1.21 M22.67 68.73 C43.98 45.87, 61.74 20.64, 81.72 0.81 M22.67 68.73 C43.15 43.45, 64.95 19.13, 81.72 0.81 M27.66 69.09 C44.32 50.84, 59.36 36.22, 86.71 1.17 M27.66 69.09 C47.32 48.34, 65.57 25.7, 86.71 1.17 M33.3 68.7 C46.3 52.89, 62.88 37.33, 92.35 0.78 M33.3 68.7 C44.85 54.88, 56.98 41, 92.35 0.78 M38.29 69.06 C55.75 47.74, 76.77 24.35, 97.34 1.14 M38.29 69.06 C62.41 42.44, 83.76 16, 97.34 1.14 M43.93 68.67 C57.65 51.06, 74.37 35.12, 102.98 0.74 M43.93 68.67 C62.69 45.79, 83.69 23.92, 102.98 0.74 M48.92 69.03 C63.75 48.82, 81.7 32.54, 107.97 1.1 M48.92 69.03 C69.69 46.74, 88.29 22.24, 107.97 1.1 M54.56 68.63 C75.31 44.29, 95.9 18.99, 113.61 0.71 M54.56 68.63 C76.15 44.22, 96.59 19.79, 113.61 0.71 M59.55 68.99 C69.63 56.66, 84.64 40.99, 118.6 1.07 M59.55 68.99 C79.36 45.36, 99.51 21.27, 118.6 1.07 M65.19 68.6 C90.64 41.8, 110.59 15.03, 124.24 0.67 M65.19 68.6 C83.01 49.12, 98.91 30.41, 124.24 0.67 M70.18 68.96 C84.14 53.19, 97.66 36.07, 129.23 1.03 M70.18 68.96 C89.01 47.99, 110.18 24.67, 129.23 1.03 M75.82 68.56 C97.44 41.9, 123.04 13.84, 134.87 0.64 M75.82 68.56 C87.96 53.8, 102.47 39.36, 134.87 0.64 M80.81 68.92 C104.52 40.78, 125.67 15.81, 139.86 1 M80.81 68.92 C96.33 50.77, 111.87 33.29, 139.86 1 M86.45 68.53 C98.33 53.84, 111.99 36.79, 145.5 0.6 M86.45 68.53 C103.76 48.81, 120.89 29.6, 145.5 0.6 M91.44 68.89 C111.21 45.94, 133.31 20.39, 150.49 0.96 M91.44 68.89 C108.08 49.8, 123.86 29.88, 150.49 0.96 M97.08 68.49 C117.89 45.55, 140.88 20.18, 156.13 0.57 M97.08 68.49 C116.39 48.59, 135.16 26.61, 156.13 0.57 M102.07 68.85 C118.56 52.06, 132.89 33.28, 161.12 0.93 M102.07 68.85 C124.02 43.58, 145.36 18.01, 161.12 0.93 M107.71 68.46 C126.26 46.66, 148.75 20.15, 166.76 0.53 M107.71 68.46 C125.69 47.71, 143.61 26.51, 166.76 0.53 M112.7 68.82 C137.08 43.51, 157.05 17.8, 171.75 0.89 M112.7 68.82 C129.96 50.64, 146.63 30.4, 171.75 0.89 M118.34 68.42 C134.3 53.5, 146.08 35.8, 177.39 0.5 M118.34 68.42 C131.95 53.05, 144.99 36.76, 177.39 0.5 M123.33 68.78 C146.96 42.36, 167.07 17.05, 183.03 0.11 M123.33 68.78 C147.52 41.2, 170.18 15.23, 183.03 0.11 M128.97 68.39 C143.95 54.69, 155.4 36.95, 187.36 1.22 M128.97 68.39 C151.48 41.84, 175.15 16.47, 187.36 1.22 M133.96 68.75 C145.88 55.5, 156.42 41.6, 191.69 2.34 M133.96 68.75 C148.31 50.65, 164.66 33.34, 191.69 2.34 M139.6 68.36 C152.95 53.97, 166.13 35.52, 194.71 4.96 M139.6 68.36 C152.53 54.34, 166.6 37, 194.71 4.96 M144.59 68.72 C161.97 48.76, 179.47 30.72, 197.73 7.58 M144.59 68.72 C161.05 50.33, 176.97 30.72, 197.73 7.58 M149.58 69.08 C165.61 52.9, 179.57 35.33, 199.44 11.72 M149.58 69.08 C161.33 54.83, 172.83 41.79, 199.44 11.72 M155.22 68.68 C165.34 54.73, 175.64 42.83, 201.8 15.1 M155.22 68.68 C168.95 54, 182.52 37.27, 201.8 15.1 M160.21 69.04 C175.76 51.59, 192.97 32.65, 201.54 21.49 M160.21 69.04 C171.76 54.24, 185.64 40.91, 201.54 21.49 M165.85 68.65 C177.53 57.02, 187.75 44.98, 201.28 27.89 M165.85 68.65 C172.94 60.15, 181.09 52.8, 201.28 27.89 M170.84 69.01 C182.95 58.48, 191.42 46.45, 201.67 33.54 M170.84 69.01 C178.32 61.41, 183.65 54.94, 201.67 33.54 M176.48 68.61 C180.45 61.19, 187.5 57.88, 201.41 39.93 M176.48 68.61 C183.15 62.83, 189.17 54.24, 201.41 39.93 M181.47 68.97 C187.71 60.62, 196.23 52.89, 201.15 46.33 M181.47 68.97 C186.22 64.37, 190.2 58.56, 201.15 46.33 M185.14 70.84 C189.05 66.87, 194.03 62.81, 200.89 52.73 M185.14 70.84 C190.3 63.79, 196.81 56.77, 200.89 52.73" stroke="#b2f2bb" stroke-width="0.5" fill="none"></path><path d="M17.12 0 C74.86 0.95, 134.94 1.34, 182.42 0 M17.12 0 C64.52 -0.52, 113.61 0.35, 182.42 0 M182.42 0 C193.37 -1.4, 198.22 7.22, 199.55 17.12 M182.42 0 C193.31 -1.5, 201.75 6.75, 199.55 17.12 M199.55 17.12 C200.9 28.21, 199.87 41.6, 199.55 51.37 M199.55 17.12 C200.67 24.47, 199.62 31.93, 199.55 51.37 M199.55 51.37 C197.9 64.08, 192.61 68.14, 182.42 68.49 M199.55 51.37 C199.18 63.71, 192.67 70.44, 182.42 68.49 M182.42 68.49 C120.56 70.94, 56.57 71.38, 17.12 68.49 M182.42 68.49 C124.36 67.58, 68.74 67.29, 17.12 68.49 M17.12 68.49 C7.33 70.01, 0.4 63.82, 0 51.37 M17.12 68.49 C6.17 66.22, -1.2 61.94, 0 51.37 M0 51.37 C-0.36 43.15, 0.47 35.07, 0 17.12 M0 51.37 C-1.06 39, 0.36 27, 0 17.12 M0 17.12 C1.65 5.74, 5.33 -1.28, 17.12 0 M0 17.12 C2.22 3.7, 6.49 1.07, 17.12 0" stroke="#1e1e1e" stroke-width="1" fill="none"></path></g><g transform="translate(111.3984375 87.5211181640625) rotate(0 89.3919448852539 10)"><text x="0" y="14.016" font-family="Virgil, Segoe UI Emoji" font-size="16px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">procedure function (fn)</text></g></svg>

however, my font-family does not apply

---
// happens also in .mdx files
import { Image } from 'astro:assets'
import example from '../assets/example.svg'
---

<Image src={example} alt="Example" />

As you can see, my style does not get respected in the svg

image

What's the expected result?

I would expect my fonts load properly when using the <Image> from astro:assets 

---
// happens also in .mdx files
import { Image } from 'astro:assets'
import example from '../assets/example.svg'
---

<Image class="mx-auto" src={example} alt="Example" />

<p class="font-['Virgil']">the font does load</p>
image

What leads me to believe this is due to astro doing some image processing is because if I change my .svg to a .astro file and just use it as a standalone component that happens to return an svg it does work

---
// happens also in .mdx files
import { Image } from 'astro:assets'
import example from '../assets/example.svg'
import Example from '../assets/example.astro'
---

<Image class="mx-auto" src={example} alt="Example" />

<p class="font-['Virgil']">the font does load</p>

<Example />
image

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nhfu4n?file=src%2Fpages%2Findex.astro

Participation

bluwy commented 3 months ago

I'm not sure this is a bug in Astro. When you use an SVG via an <img> tag, the nested <style> will no longer work, it's the default browser behaviour. If you want the <style> to work, you need to inline it, either via your .astro file trick, or import with:

---
import example from '../assets/example.svg?raw'
---

<Fragment set:html={example} />
Princesseuh commented 3 months ago

The Image component uses img to embed the SVG, which cannot use fonts.

https://www.w3.org/wiki/SVG_Security