Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inlineStyles not capturing matching classes #1743

Closed
abejfehr opened this issue Jan 27, 2023 · 3 comments
Closed

inlineStyles not capturing matching classes #1743

abejfehr opened this issue Jan 27, 2023 · 3 comments

Comments

@abejfehr
Copy link
Contributor

abejfehr commented Jan 27, 2023

Describe the bug
I've given many many paths in an Inkscape document classes so that I could style them similarly.

Unfortunately, the SVG renderer I'm using doesn't support stylesheets so I need to have them as inline styles.

Apparently the inlineStyles plugin is what I'm looking for, but it doesn't seem to be doing anything for my SVG. I can see that code in the inlineStyles plugin is executed and it fails to find matches at this point.

To Reproduce

Here's an SVG that it fails on:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xml:space="preserve"
  id="svg5"
  width="1570.062"
  height="2730"
  version="1.1"
  viewBox="0 0 415.412 722.312"
>
  <style id="style771">
    .segment {
      stroke-width: 2.5;
      stroke: #0085b2;
      fill: none;
    }

    .segment.minor {
      stroke-width: 1.5;
      stroke: #15c6aa;
    }
  </style>
  <g id="layer1" transform="translate(200.662 362.87)">
    <path id="path254" d="M62.887-325.208h67.346" class="segment" />
    <path id="path1031" d="M163.502-303.979h3.762" class="segment minor" />
  </g>
</svg>

As you can see, there is a stylesheet with rules for both .segment and segment.minor, and there exist a path that matches each of those.

Here's the program I used to try to inline these:

const { optimize } = require("svgo");

const result = optimize(offendingSvgString,
  {
    multipass: true,
    plugins: [
      "removeRasterImages",
      {
        name: "preset-default", // this preset includes inlineStyles
      },
    ],
  }
);

Expected behavior
I expected my class definitions to be inlined as style attributes for all my paths.

Desktop (please complete the following information):

  • SVGO Version: 3.0.2
  • NodeJs Version: v19.1.0
  • OS: macOS Ventura
@SethFalco
Copy link
Member

SethFalco commented Sep 26, 2023

I'm trying to reproduce this issue, but not having the same one as you.

This is the output when I use your file and config, with the SVGO v3.0.2 JavaScript API on Node v19.1.0:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1570.062" height="2730" viewBox="0 0 415.412 722.312">
  <path d="M62.887-325.208h67.346" style="stroke-width:2.5;stroke:#0085b2;fill:none" transform="translate(200.662 362.87)"/>
  <path d="M163.502-303.979h3.762" class="minor" style="stroke-width:1.5;stroke:#15c6aa" transform="translate(200.662 362.87)"/>
</svg>

I do get a different issue, which is that the class minor hasn't been removed from the second path for some reason. But the styles themselves are being inlined correctly.

Can you still reproduce this?

@abejfehr
Copy link
Contributor Author

It's been a while and I'm afraid this isn't really relevant to me anymore so I don't have a reproduction handy.

You can feel free to close the issue if you'd like and I can reopen it if this is ever a blocker for me again

@SethFalco
Copy link
Member

You can feel free to close the issue if you'd like and I can reopen it if this is ever a blocker for me again

Sure! Sorry it took so long to come back to you on this, though.
Feel free to open another if anything else comes up. Ideally, it'll be looked at in a timely manner this time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants