Not rendering SVG

[mahemoff]

I did a standard install with CSS and JS (no Entypo as I don't think it's necessary anymore?) and no config options.

The share button pops up without icons:

I'm seeing errors like this in devtools:

[gurumark]

+1

[hhsnopek]

Which browser is this in?

Henry Snopek

On Thu, Sep 17, 2015 at 9:07 AM, gurumark [email protected]
wrote:

+1

Reply to this email directly or view it on GitHub:
#219 (comment)

[gurumark]

Firefox 40.0.3 on OSX 10.10

[mahemoff]

Chrome stable too (M45). (Devtools screenshot was from Chrome.)

[hhsnopek]

when you hover over the icon what's the message? I'm currently looking at master with Chrome (45.0.2454.93 ) and Canary (47.0.2511.3 canary) and both render this properly. However in Firefox (40.0.3) and FireFoxDeveloperEdition (42.0a2 (2015-08-18)) it isn't, after doing some research in firefox they do not support the "#" unless encoded as "%23" (see encodeURIComponent encoding). Also didn't realize that <= IE11 the whole string must be encoded. I'll get a PR going for these two fixes

[mahemoff]

"Invalid property value".

Is there a working demo? As the linked one at http://sharebutton.co/ I think is using the old Entypo model.

Here's a JSBin illustrating the problem. It also yields this error for me in Chrome.

[mahemoff]

Actually it may be related to the use of double-quotes.

The JSBin does work once I fixed up quote marks (the background property is valid though I can't see it in the web page). http://jsbin.com/weluzi/3/edit?html,css,output

Likewise, in the share button CSS, it looks like double-quotes are nested, I presume there be escaping or single quotes used to avoid that.

[mahemoff]

Yes, that fixed it! I simply changed the surrounding double-quotes to single quotes, ie from url("data ... </svg>") tourl('data ... ')`.
https://gist.github.com/mahemoff/43edb00f06bdb604f6c3

I see the Stylus already contains single-quotes, but the CSS in dist/ uses double-quotes?

[hhsnopek]

Yeah so only compile stylus changes this over, not sure why

Henry Snopek

On Fri, Sep 18, 2015 at 12:40 AM, Michael Mahemoff
[email protected] wrote:

Yes, that fixed it! I simply changed the surrounding double-quotes to single quotes, ie from url("data ... </svg>") tourl('data ... ')`.

I see the Stylus already contains single-quotes, but the CSS in dist/ uses double-quotes?

Reply to this email directly or view it on GitHub:
#219 (comment)

[hhsnopek]

Excuse the strange grammer, it was pretty late when I sent that. Basically stylus is processing the single quotes into double quotes. Locally when I was adjusting styles, encoding the # within the color made it viewable again. in the compiled source everything is still double quoted. As the quotes are technically optional we could remove them from our stylus, but this results in errors from stylus.

[hafi86]

hey, i was having the same problem, i finally was able to solve it with those two changes:

1. converting all "data...." into single quote, like you guys suggested (thanks!), but that wasn't enough in my case, so i got to stage 2:
2. adding
   top:12px;
   left:30px;
   in the same css file, to the class "share-button .sb-social ul li:before,
   share-button .sb-social ul li:after"

only than the icons appeared.
hope this helps someone... :)

[mahemoff]

@hafi86 Strange; I have it in production now using only the single-quote change.

[mahemoff]

BTW I'm leaving this open though maybe only a patch to stylus would fix it? (short of a hacky post-processing string replace)

[hhsnopek]

I'm thinking of switching the preprocessor (stylus) of to postcss or just creating a mixin to overwrite 'url()' which would then use JavaScript to remove quotes and encode the string with 'encodeComponentURI()'.

Henry Snopek

On Tue, Sep 22, 2015 at 9:59 AM, Michael Mahemoff
[email protected] wrote:

BTW I'm leaving this open though maybe only a patch to stylus would fix it? (short of a hacky post-processing string replace)

Reply to this email directly or view it on GitHub:
#219 (comment)

[hhsnopek]

got stylus and jade mixed up, your right it would have to use a post processing hack... I'm thinking of just moving this into postcss now

[hafi86]

Yes, i find it strange too, but changing to signle-quote only helped for the icon on the button itself (the one that shows on the button before clicking 'share'), not sure why.
Thank you for your help.

[hhsnopek]

I have a fix locally for this, I'll get this up within the next couple hours

[hhsnopek]

@mahemoff wanna take a look at #227 before I merge?

[raulhuelamo]

Hi guys, I had issues today with SVG in Firefox (I started using the plugin yesterday), reviewed the quotation fix method and didn't work.
I found this solution in StackOverflow (http://stackoverflow.com/a/21626701) that actually makes the whole sense, removing every problem related with quotations just doing some pre-process with the SVG code (Base64 encoding).
It worked like a charm for me, so I hope you find this useful guys

[Exclam]

I had the same issues with Chrome today. I solved it (but only for Chrome) by urldecode the SVG in the css and set the width and height to 100%. Maybe the issue is caused by the frameworks I use around. eg. Flexbox.

Unfortunately it doesn't run now in Firefox and Safari :)
Used in basket view of http://www.love-o-mat.de/

[natecook]

Ya, the example seems to be broken again. It's not displaying the SVGs for me in Chrome Version 50.0.2661.94 (64-bit) and on MacBook Pro OS X Yosemite 10.10.5

[perjonsson]

Same here. Chrome 50.0.2661.94 on El Captain 10.11.1. Any news on this?

[natecook]

@perjonsson you may find an answer over at this issue. I ended up downloading the svg's and then referencing those instead of the data uri.
Another guy said he did the same on the other issue.