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

reusePaths breaks file #1733

Closed
JoKalliauer opened this issue Jan 6, 2023 · 2 comments · Fixed by #1784
Closed

reusePaths breaks file #1733

JoKalliauer opened this issue Jan 6, 2023 · 2 comments · Fixed by #1784
Labels

Comments

@JoKalliauer
Copy link

==========Input========== ==========Output==========
Input Output

Version
https://jakearchibald.github.io/svgomg/

License

source: https://commons.wikimedia.org/wiki/File:Flag-map_of_the_world.svg

author: https://commons.wikimedia.org/wiki/User:Transparent_6lue

license: Public Domain by the author

@JoKalliauer JoKalliauer added the bug label Jan 6, 2023
@SethFalco
Copy link
Member

SethFalco commented Sep 18, 2023

The reusePaths plugin appears to have been named Replace duplicate elements with links in SVGOMG.

I've made a minimal example that allows us to reproduce the issue in SVGOMG and SVGO. The issue still occurs with SVGO v3.0.2.

original.svg

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-29.947 60.987 69.975 102.505">
  <g transform="translate(-59 64)">
    <g id="b">
      <path id="a" fill="#000" d="M0 0v1h.5Z" transform="rotate(18 3.157 -.5)"/>
      <use xlink:href="#a" width="1" height="1" transform="scale(-1 1)"/>
    </g>
    <use xlink:href="#b" width="1" height="1" transform="rotate(72)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(-72)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(144)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(-144)"/>
  </g>
  <path id="c" fill="#000" d="M0 0v1h.5Z" transform="rotate(18 3.157 -.5)"/>
  <use xlink:href="#c" width="1" height="1" transform="scale(-1 1)"/>
</svg>

svgo.config.js

module.exports = {
  plugins: [
    'reusePaths'
  ]
};

The result, prettified:

optimized.svg

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-29.947 60.987 69.975 102.505">
  <defs>
    <path id="a" fill="#000" d="M0 0v1h.5Z"/>
  </defs>
  <g transform="translate(-59 64)">
    <g id="b">
      <use transform="rotate(18 3.157 -.5)" xlink:href="#a"/>
      <use xlink:href="#a" width="1" height="1" transform="scale(-1 1)"/>
    </g>
    <use xlink:href="#b" width="1" height="1" transform="rotate(72)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(-72)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(144)"/>
    <use xlink:href="#b" width="1" height="1" transform="rotate(-144)"/>
  </g>
  <use id="c" transform="rotate(18 3.157 -.5)" xlink:href="#a"/>
  <use xlink:href="#c" width="1" height="1" transform="scale(-1 1)"/>
</svg>

@JoKalliauer
Copy link
Author

Confirm fix

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

Successfully merging a pull request may close this issue.

2 participants