search

jonathantneal / svg4everybody

Use external SVG spritemaps today
https://jonneal.dev/svg4everybody/
Other
3.29k stars 353 forks source link

Inlining External SVG from sprite, SVG doesn't display correctly #189

Closed wesruv closed 5 years ago

wesruv commented 5 years ago

Here's a quick code sample: https://wesruv.github.io/svg4everybody-woes/

I want to inline all external SVG's that have <use> so they're cacheable and I can style them.

The #404-bot sprite is waaaay off the displayable area When I choose #bulb-is it'll create a def > path#ca but the markup never uses #ca anywhere When I choose #area-is it'll create a def > path#ca but the markup never uses #ba anywhere

Halp?

wesruv commented 5 years ago

Repo for the example, in case it helps: https://github.com/wesruv/svg4everybody-woes

wesruv commented 5 years ago

A coworker noticed this:

it seems like with JS enabled, it drops the SVG in, but the linked SVG element's width/height/viewBox gets lost: <svg xmlns="http://www.w3.org/2000/svg" width="97" height="82.4" viewBox="-479.5 280.8 97 82.4" id="404-bot">

SVG4Everybody: screen shot 2019-02-20 at 2 57 39 pm

Manually pasting in SVG: screen shot 2019-02-20 at 2 59 19 pm

wesruv commented 5 years ago

Finally got SVG's to work with use and svg4everybody, I went back and asked the designers to flatten all masks in the files. It appears <mask> tags weren't working correctly?