search

tigt / mini-svg-data-uri

Small, efficient encoding of SVG data URIs for CSS, HTML, etc.
https://npm.runkit.com/mini-svg-data-uri
MIT License
309 stars 16 forks source link

Should this work in a cursor as well? #17

Closed rob-gordon closed 3 years ago

rob-gordon commented 3 years ago

I have an svg I've compressed on svgmo. The output from mini-svg-data-uri works perfectly as a background-image. But it fails when used as a cursor? (Chrome / Mac) Do you know what may be causing this difference? Full code

const svgToMiniDataURI = require("mini-svg-data-uri");
const workingSvg = `<svg width="73" height="26" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-11.8%" y="-46.2%" width="123.5%" height="192.5%" filterUnits="objectBoundingBox" id="a"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0" in="shadowBlurOuter1"/></filter><path id="b" d="M225.369 461.888l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H176v-2h57.932l-8.672-4.878-.872-.49z"/></defs><g fill="#000" transform="translate(-171 -457)" fill-rule="nonzero"><use filter="url(#a)" xlink:href="#b"/><use xlink:href="#b"/></g></svg>`;
const optimizedSVGDataURI = svgToMiniDataURI(workingSvg);

Used like


.my-custom-cursor {
   cursor: url("data:image/svg+xml,%3csvg width='73' height='26' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-11.8%25' y='-46.2%25' width='123.5%25' height='192.5%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='2.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3cpath id='b' d='M225.369 461.888l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H176v-2h57.932l-8.672-4.878-.872-.49z'/%3e%3c/defs%3e%3cg fill='black' transform='translate(-171 -457)' fill-rule='nonzero'%3e%3cuse filter='url(%23a)' xlink:href='%23b'/%3e%3cuse xlink:href='%23b'/%3e%3c/g%3e%3c/svg%3e");
}
tigt commented 3 years ago

Does it work when you run it through a more traditional URL-encoder, like Dencoder?

rob-gordon commented 3 years ago

For some reason it works when I add a fallback

body {
  cursor: url("data:image/svg+xml,%3csvg width='73' height='26' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter x='-11.8%25' y='-46.2%25' width='123.5%25' height='192.5%25' filterUnits='objectBoundingBox' id='a'%3e%3cfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3e%3cfeGaussianBlur stdDeviation='2.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3e%3cfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.75 0' in='shadowBlurOuter1'/%3e%3c/filter%3e%3cpath id='b' d='M225.369 461.888l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H176v-2h57.932l-8.672-4.878-.872-.49z'/%3e%3c/defs%3e%3cg fill='black' transform='translate(-171 -457)' fill-rule='nonzero'%3e%3cuse filter='url(%23a)' xlink:href='%23b'/%3e%3cuse xlink:href='%23b'/%3e%3c/g%3e%3c/svg%3e"),
          e-resize;
}

I've no idea why that would make a difference but it definitely wasn't related to this module. Closing this issue. Thanks!

tigt commented 3 years ago

Oh, yep, that'll do it. CSS requires cursor to have a keyword fallback.