SVGs are being loaded without the style property.

[danilobassi8]

Describe the bug

Hi, first of all. Thanks for this amazing library.
I was working with this tool, and I needed to dynamically change the color of my svgs. The best way I had is to change css variables given a certain state.
The problem is that all my styles properties dissapears when the library insert this component in the DOM.

Example:
I have this svg in my /public/ directory:

<svg version="1.1" width="640" height="640" viewBox="0 0 640 640" style="--my-css-var: yellow;">
  <g class="myClass">
    <g transform="matrix(1 0 0 1 320 320)">
      <path
        style="
          stroke-width: 0;
          stroke-dasharray: none;
          stroke-linecap: butt;
          stroke-dashoffset: 0;
          stroke-linejoin: miter;
          stroke-miterlimit: 4;
          fill: var(--my-css-var);
          fill-rule: nonzero;
          opacity: 1;
        "
        transform=" translate(0, 0)"
        d="M -320 -320 L 320 -320 L 320 320 L -320 320 z"
        stroke-linecap="round"
      />
    </g>
  </g>
</svg>

and this is what it gets inserted in the DOM:

<svg version="1.1" width="100%" height="100%" viewBox="0 0 640 640">
  <g class="myClass">
    <g transform="matrix(1 0 0 1 320 320)">
      <path
        transform=" translate(0, 0)"
        d="M -320 -320 L 320 -320 L 320 320 L -320 320 z"
        stroke-linecap="round"
      ></path>
    </g>
  </g>
</svg>

is this expected?
If it is, is there any way I could manage to get this styles attributes working?

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/gracious-lumiere-dds5cs

Steps to reproduce

1. Create a new react app.
2. Load the svg I provided.
3. See that no styles are being applied to your svg.

Expected behavior

As a user, I expect to have the exact svg I had in my assets. But I'm getting the same svg without styles.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

No response

react-inlinesvg version

4.1.1

TypeScript version

5.2.2

Build tool

vite

Additional context

No response

[gilbarbara]

Hey @danilobassi8
I can see that the style attribute was removed, but when I tried to open the SVG directly in the browser, it gave an error:
This XML file does not appear to have any style information associated with it. The document tree is shown below.

So maybe this could be impacting the conversion. Can you make sure the browser can render it and try again?
Under the hood, this library uses react-from-dom, which basically uses the DOMParser method to parse the SVG.

[whizzbbig]

Hey @danilobassi8 I can see that the style attribute was removed, but when I tried to open the SVG directly in the browser, it gave an error: This XML file does not appear to have any style information associated with it. The document tree is shown below.

So maybe this could be impacting the conversion. Can you make sure the browser can render it and try again? Under the hood, this library uses react-from-dom, which basically uses the DOMParser method to parse the SVG.

BTW do we have the ability to get control of the fill property, like if we can able to give the currentColor value to fill property of the svg imported via link!

[danilobassi8]

@gilbarbara, it's also happening with any svg with the styles attribute.
@whizzbbig probably fill could work, I'd need to re-design my svgs, but for complex designs, css custom properties are really handy.

[gilbarbara]

Hey @whizzbbig
Yes, you can use the preProcessor prop to change any property before parsing the SVG.

[gilbarbara]

Hey @danilobassi8
I have a test for the style property, so isn't happening to every SVG with style.
Do you have any other examples that are loading correctly in the browser?
Can you try adding `xmlns="http://www.w3.org/2000/svg" to the SVG tag?

[gilbarbara]

You can read more about XML namespaces and their impact on SVGs here

[gilbarbara]

@danilobassi8
Also, the linebreaks in the style property affect the conversion; removing them makes the styles convert correctly.

[danilobassi8]

I tried, I have a lot of svgs that follows this kind of style:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="640" viewBox="0 0 640 640" style="--my-css-var: yellow">
<g class="myClass">
    <g transform="matrix(1 0 0 1 320 320)">
      <path
        style="fill: var(--my-css-var)"
        transform=" translate(0, 0)"
        d="M -320 -320 L 320 -320 L 320 320 L -320 320 z"
        stroke-linecap="round"
      />
    </g>
  </g>
</svg>

my svgs are more complex, but that is a minimal example.
I use the css classes to style things and then I use the custom property to individually change colors of other stuff on selected svgs.

[gilbarbara]

Hey @danilobassi8
I've found a bug in the conversion to SVG that was messing up the CSS variable declaration and I fixed in v4.1.2
Can you check and let me know?

[danilobassi8]

It worked with the provided example, but it does not work for a real svg in my project. I provided an example here:
https://codesandbox.io/p/sandbox/hungry-frog-y9tzr9

[gilbarbara]

Alright, fixed in 4.1.3