search

yisibl / resvg-js

A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
https://resvg-js.vercel.app/
Mozilla Public License 2.0
1.53k stars 54 forks source link

use/symbol support #70

Closed millette closed 2 years ago

millette commented 2 years ago

I'm using sprites (use/symbol) to draw an SVG. Here's an example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 560" class="bg-white"><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_4_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-shoulderpads.svg#ispikes_2_of_2"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#itorso_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ileg_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ileg_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iforearm_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iforearm_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iarm_right_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#iarm_left_android-00"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ifoot_left"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ifoot_right"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ihand_left"></use><use href="https://sol.charactercreator.org/sprites/whole-body.svg#ihand_right"></use><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_2_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-cloak.svg#idefault_3_of_4"></use><use href="https://sol.charactercreator.org/sprites/whole-shoulderpads.svg#ispikes_1_of_2"></use><use href="https://sol.charactercreator.org/sprites/whole-underwear.svg#iplain"></use><use href="https://sol.charactercreator.org/sprites/whole-tatoo.svg#iaum_chest"></use></svg>

Should this work with resvg-js? Or am I missing something else?

millette commented 2 years ago

OK, found related issue upstream https://github.com/RazrFalcon/resvg/issues/6.

yisibl commented 2 years ago

Thank you for your interest, resvg-js can follow soon once upstream support is available.

yisibl commented 2 years ago

@millette resvg does not support externally linked files at the moment. Please put the use references in the same SVG so that they can be rendered.

millette commented 2 years ago

Thanks! Still hoping for externally linked files since that's how sprites work, for instance this character creator (proof of concept): https://sol.charactercreator.org/credits

Items are stored together (armbands, belts, etc.) in various svg files (using symbol) and then referenced in the created character.