5

I use Photoshop to export svg which works fine when used inside img tag in Firefox but fails in Chrome i.e. nothing shows up.

I have exactly the same problem as this question: Chrome not rendering SVG referenced via <img> tag and using Adobe Illustrator and opening the .svg file and saving as embed does solve the issue.

So the seleced solution does solve my problem too but it requires Adobe Illustrator.

Since I don't need Adobe Illustrator for anything else, I wanted to know if there is an alternative?

http://jsfiddle.net/2x00wmxy/

<img src = "http://imgh.us/testsvg_1.svg" />

Try the jsfiddle in Chrome and Firefox and you'll see the difference.

Community
  • 1
  • 1
Test
  • 315
  • 5
  • 11
  • Try putting your SVG code through https://jakearchibald.github.io/svgomg/ – that can not only compress the code, but also removes many attributes that image editing programs usually put in, which are not really necessary (and maybe one of those trips chrome up here.) Otherwise, show a live example please – maybe then someone can help you figuring out what”s wrong. – CBroe Dec 04 '15 at 17:58
  • You could export once with Illustrator and use the generated HTML from then on (maybe tweaking file locations and sizes). – Kenney Dec 04 '15 at 18:02
  • @Kenney What I meant was I don't want to BUY Illustrator because I won't be using it for anything else. – Test Dec 04 '15 at 18:03
  • Ah okay, I understood *"using Adobe Illustrator and opening the .svg file and saving as embed does solve the issue"* to mean that you actually did that, which means you have a working example that you could use. – Kenney Dec 04 '15 at 18:05
  • @Kenney I did do that using trial version of Adobe. :) Trial version has expired though. – Test Dec 04 '15 at 18:08
  • @CBroe Added jsfiddle link. – Test Dec 04 '15 at 18:11
  • Thought as much ;-) It shouldn't be hard (and no need for Illustrator): [see this related SO question](http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files). – Kenney Dec 04 '15 at 18:13
  • Am I getting this right – you are using an SVG image for the sole purpose of embedding a PNG image into it via a Data URI …? Sorry, but that doesn’t make much sense to me. (And that Base64 encoded Data URI looks kinda shady – normally you don’t get what seems to be hundreds of consecutive `/` characters in that.) – CBroe Dec 04 '15 at 18:17
  • @CBroe The purpose of using .svg is it scales much nicer than .png. I exported it using Photoshop. – Test Dec 04 '15 at 18:21
  • @Kenney I want to continue using img tag. Basically, just wanted to know if there is a software (like Inkspace) or something that would let me do what Illustrator was doing - convert linked .svg file to embed .svg file. – Test Dec 04 '15 at 18:25
  • Sorry, but that seems to be rather nonsense to me. The content of your image is basically still a _bitmap_ image, because that’s what PNGs _are_. So you will have practically _none_ of the advantages a _vector-based_ image format might have in a situation like this. – CBroe Dec 04 '15 at 18:30
  • @CBroe I had different results. :) – Test Dec 04 '15 at 18:59
  • This looks like it might be a chromium webkit bug. see bug report https://code.google.com/p/chromium/issues/detail?id=170560 .. since your image is just a data URI base64 image, just use a regular `img` tag instead of putting the `image` element in a SVG file. Your image is a bitmap and not vector, so not sure why you need SVG? – Jonathan Marzullo Dec 04 '15 at 19:32

0 Answers0