SVG Optimisation

[daring star]

I have a data file that looks like the following

    "icon": "/src/assets/icons/optimised.svg",
    "title": "Optimized Page Speed",
    "text": "If your site takes more than 3 seconds to load, you can lose up to 50% of visitors before they see your menu.Our sites load in 1 second or less, keeping every hungry searcher engaged and ready to book or visit.",
    "cta": "Get Started",
    "ctaHref": "/contact"
  },```


I'm maping over the data, and then dynamically adding the content in one of my components
```---
import Heading from "./Heading.astro";
import LinkOrButton from "./LinkOrButton.astro";

const { icon, title, text, cta, ctaHref } = Astro.props;

interface Props {
  icon: string;
  title: string;
  text: string;
  cta: string;
  ctaHref: string;
}
---

<li class="card">
  <a href={cta}>
    <div class="icon__wrapper">
      <img src={icon} alt="" aria-hidden="true" />
    </div>
    <Heading tag="h3" size="h3" text={title} />
    <p>{text}</p>
    <span class="fake-link">{cta}</span>
  </a>
</li>```


The problem with my current code is that I'm not using the built in SVG Optimisation. Is there a way to use the experimental SVG optimsation (SVGO) when mapping over data like this instead of directly importing the SVG in the frontmatter?

[split creek]

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

---

Astro’s experimental SVG optimization only runs on imported SVG components, not on file paths used in <img src="...">. [SVG optimization; SVG components]

So:

• src="/src/assets/icons/optimised.svg" in <img> will not be optimized by SVGO.
• import Icon from '../assets/icons/optimised.svg'; <Icon /> can be optimized when experimental.svgo is enabled. [SVG optimization; SVG components]

The docs do not describe a way to:

• Turn a string path from data into an SVG component at runtime, or
• Apply the experimental svgo optimization to arbitrary <img> src URLs.

Because of that, there is no documented way (in these sources) to keep your current “string path in JSON + <img>” pattern and still get experimental SVG optimization.

To use SVGO with this feature, you would need to restructure so that you import the SVGs as components in frontmatter and pass those components (or their names) through your data instead of raw string paths. The exact pattern for doing that dynamically is not covered in the provided docs, so I can’t give a code example that’s guaranteed to match Astro’s behavior beyond the basic:

---
// astro.config.mjs
// experimental: { svgo: true }

// component
import Icon from '../assets/icons/optimised.svg';
---
<Icon />

[SVG optimization]

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

@daring star Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[daring star]

@split creek "To use SVGO with this feature, you would need to restructure so that you import the SVGs as components in frontmatter and pass those components (or their names) through your data instead of raw string paths. The exact pattern for doing that dynamically is not covered in the provided docs, so I can’t give a code example that’s guaranteed to match Astro’s behavior beyond the basic:"

So you can't give me the solution on how I would go about passing the individual components/names into the data instead of the raw strings?

[split creek]

Let me check the knowledge base for you again. One moment! :books:

---

You’re right to question that; based on the docs provided, I cannot show a fully worked, “official” pattern for:

• Storing “component references” in data, and
• Then dynamically turning those into imported SVG components at runtime,

because this pattern is not described in the Astro docs we have. The only documented, supported patterns are:

1. Import SVG as a component and use it directly:

   ---import Logo from '../assets/logo.svg';---
   <Logo />
   

   This is what the experimental svgo optimization applies to. [SVG components; SVG optimization usage]

2. Use <img> / <svg> with string src (no optimization):

   <img src={localBirdImage.src} alt="..." />
   <img src="/images/bird-in-public-folder.jpg" alt="..." />
   

   These are explicitly described as unprocessed by Astro. [Images in .astro files]

The docs do not cover:

• Passing component constructors (like Logo) through JSON or other data, or
• Looking up/importing SVG components dynamically from a string name in data.

Because of that, I can’t honestly give you a concrete, doc-backed code sample for “put the component name in the data and then render it dynamically” that I can claim is officially supported.

So:

• Yes, conceptually you’d need to move from “string path in JSON + <img>” to “imported SVG components + <Logo /> etc.” to benefit from experimental.svgo. [SVG optimization]
• But the exact data‑driven pattern you’re asking for (mapping over data and resolving component names) is not documented in the sources I have, so I can’t provide a reliable, official solution for that part.

---

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