SVG using tag appears completely black and missing a part of it

Question

I'm trying to add a SVG to an HTML page with the <use> tag as following:

<div id="ampoule_container">
    <svg>
        <use href="resources/assets/Ampoule.svg#ampoule"/>
    </svg>
</div>

The problem is that it appears completely black, and a part of it is missing like so:

Screenshot

It should look like this:

If I type its path in a navigator it shows up correctly. After checking, no CSS is influencing its color.

My guess is that <use> tag doesn't support colors, but only shapes, what can I do ?

Here is the SVG code made with Adobe Illustrator:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="ampoule" data-name="ampoule" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 500">
  <defs>
    <style...>
    <clippath id="clippath-4">...</clippath>
    <linearGradient.../>
    <linearGradient.../>
  </defs>
  <g class="cls-10">
    <g id=...>...</g>
    <g id=...>...</g>
    <g id=...>...</g>
    <g id=...>...</g>
  </g>
</svg>

Looking at the documentation for [use](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) it seems to also allow color. Have you tried just using `` ? — Geshode, Jun 08 '23 at 02:48
We'd need to see the markup for Ampoule.svg but you should be warned that external use elements only allow SVGGraphicsElement elements in Chrome and Firefox. — Robert Longson, Jun 08 '23 at 06:38
@Geshode when i do this nothing shows up, the element is here with the correct size but it's just transparent. — Lear, Jun 08 '23 at 16:44
Loading a whole svg via `` is currently not well supported (rather new svg 2 feature). Besides, `` containing filters, clippaths masks etc. cause quite a lot of issues. See ["SVG with from external symbol sheet not loading in Firefox or Safari"](https://stackoverflow.com/questions/74128326/svg-with-defs-from-external-symbol-sheet-not-loading-in-firefox-or-safari/74173265#74173265). Please share a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — herrstrietzel, Jun 08 '23 at 17:52

chrwahl · Accepted Answer · 2023-06-10T08:22:23.477

Here are three SVGs inserted using <use> and with reference to an ID. All SVGs display a orange circle with a blur filter.

I don't know about the general support for this, but as I see it (using Firefox and Chrome), only the SVGs with the fill defined as an attribute (fill="orange") or inline style (style="fill:orange;") on the circle element works.

In all SVGs the filter is defined in <defs>. So, I don't think that the problem is the use of filters, masks or clip paths, but only an issue when you define CSS styles in <style>.

body {
  display: flex;
  gap: 10px;
}

svg {
  display: block;
  width: 200px;
  height: 200px;
  border: solid thin black;
}

<div>
  <p>Circle with fill attribute:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9Im9yYW5nZSIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01"/>
  </svg>
</div>
<div>
  <p>Circle styled with a CSS property in a <code>&lt;style&gt;</code> element:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICBjaXJjbGUgeyBmaWxsOiBvcmFuZ2U7IH0KICAgIDwvc3R5bGU+CiAgICA8ZmlsdGVyIGlkPSJibHVyIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMCIgZmlsdGVyPSJ1cmwoJyNibHVyJykiLz4KPC9zdmc+CgoK#svg01"/>
  </svg>
</div>
<div>
  <p>Circle styles with CSS property in the style attribute:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIHN0eWxlPSJmaWxsOm9yYW5nZTsiIGZpbHRlcj0idXJsKCcjYmx1cicpIi8+Cjwvc3ZnPgoKCg==#svg01"/>
  </svg>
</div>

Just noticed that you also have gradients in your SVG. So, here is a circle with a gradient defined in <defs>. That works fine in Firefox, but not in Chrome or Opera (but in general the examples does not work in Opera, but I guess that is an issue with data URLs).

body {
  display: flex;
  gap: 10px;
}

svg {
  display: block;
  width: 200px;
  height: 200px;
  border: solid thin black;
}

<div>
  <p>Circle with fill attribute and gradient:</p>
  <svg>
    <use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBpZD0ic3ZnMDEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iYmx1ciI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoOTApIj4KICAgICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0ib3JhbmdlIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0ibWFyb29uIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzAiIGZpbGw9InVybCgjZ3JhZGllbnQpIiBmaWx0ZXI9InVybCgnI2JsdXInKSIvPgo8L3N2Zz4KCgo=#svg01"/>
  </svg>
</div>

Thank you for the solution, in my case, I had to put back the svg in Illustrator and change the export parameters to "integrated style" instead of "internal CSS" — Lear, Jul 02 '23 at 00:28

SVG using tag appears completely black and missing a part of it

1 Answers1