#Make SVG transparent

3 messages · Page 1 of 1 (latest)

next plank
#

How would YOU make a SVG transparent?
I am trying this and doesn't appear to be working

---
import Canoe from '../svg/canoe.svg'
---

<Canoe width={500} height={500} fill={'transparent'} />
primal glacierBOT
#

Hi @next plank. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro’s SVG components forward attributes like width, height, fill, and stroke directly to the root <svg> element, and passed values override the ones in the file. [SVG components]

So your usage is syntactically correct:

---
import Canoe from '../svg/canoe.svg';
---

<Canoe width={500} height={500} fill="transparent" />

If this doesn’t visually change anything, the likely reasons (not explicitly covered in the docs) are:

  • The SVG paths/shapes inside canoe.svg have their own fill attributes set (e.g. <path fill="#000" ...>), so changing only the root <svg>’s fill may not affect them.
  • The SVG might be using stroke instead of fill, so you’d need to adjust stroke/stroke-opacity instead.

The Astro docs don’t go into more detail than stating that attributes you pass will be applied to the underlying <svg> and override attributes “present in the original .svg file,” but they don’t show a full example of overriding nested element attributes. [SVG components]

If you need more specific help, you’d have to inspect or edit the actual canoe.svg file to ensure its internal elements can be controlled via the attributes you’re passing.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: