SVG File won't show up in browsers

General discussions about Inkscape.
Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 2:50 am

I colored up a jpeg file and converted it to svg. It shows up in all programs as svg, clear as a bell (Thanks Inkscape). However when I try to open it in a browser the image doesn't appear. Even though the icon is IE or Chrome. Browser pops up but no image. What's happening?

Thanks.

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 2:51 am

Oh, sometimes the browser wont even open up.

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: SVG File won't show up in browsers

Postby v1nce » Tue Nov 05, 2013 3:06 am

> color up
what do you mean ?

> convert it to svg
what do you mean ? you opened the jpg in inkscape and traced it ?

> all programs
which programs ?

> as svg
how can you tell it's a svg ? By its extension ?

>browsers pops up but no image
How did you proceed ? Drag the svg onto ie/chrome icon ? launch your browser the use the open menu to open the svg ?

could you host your svg anywhere (dropbox...) so that we could have a look at it ?

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 5:15 am

Thanks for the reply Vince but let's not get too deep. If you don't know what 'color up' means then you're scaring me. It just means I colored the damned thing. Yes, if I converted it in Inkscape that means I took the jpg and converted it using path>trace to bitmap. I imported the jpeg. Saved as .svg and it shows up as .svg. It works because I did the same with the black and white files and they show up fine in a browser. Opening the browser the normal way, double click it or drag and drop file into browser. No, I'm not hosting it anywhere. What I neeed to know is why an .svg file wouldn't open in a browser nor the browser open by using the simple opening sequence.

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: SVG File won't show up in browsers

Postby tylerdurden » Tue Nov 05, 2013 7:13 am

A couple things come to mind...

The location of the content might be outside the browser view (I'd try resizing the document to contents).

Browsers might be less tolerant of non-spec svg elements, if there has been any tinkering in the xml, any spaces in variables can clobber the display in browsers, but open in Inkscape. e.g.: width="40" vs. width="40 "
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: SVG File won't show up in browsers

Postby v1nce » Tue Nov 05, 2013 7:54 am

Evolbaby wrote:Thanks for the reply Vince but let's not get too deep. If you don't know what 'color up' means then you're scaring me.

If you colored your jpeg outside of inkscape then it's pointless to state it.
If you colored it from inside inkscape then it could matters. If you used filters then those filters could be not supported by some browsers

Evolbaby wrote:It works because I did the same with the black and white files and they show up fine in a browser.

You traced the B/W version of the same drawing and it goes fine, that's it ?

Evolbaby wrote:What I neeed to know is why an .svg file wouldn't open in a browser nor the browser open by using the simple opening sequence.

As tylerdurden said it could be because of a bad viewport. Try zooming in your browser (control + mousewheel)
Or the svg could be too complex (browser crash). Which size is your svg ?

If you add a colored "background" (a simple rect under your drawing), do you see it in your browser ?

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 10:19 am

Okay, tried coloring the b/w image in gimp and saved to jpeg. Converted it to svg in Inkscape. File still won't open in a browser. Inkscape suddenly won't even recognize the file as a .svg. Colored in photoshop or gimp lookes great but you can see the icon in the file folder via explorer and gimp and all other programs that can read svg except inkscape. Properties has all the data on the image but it just won't open. I can even export as a pdf. What's up? Must be a very precise technical thing I've overlooked. Something simple.

Here's the file:

http://www.boonestoons.com/colorsuperpanda.svg

It's a conversion from a jpeg exported by gimp

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 10:38 am

Well now, I found out using theurl tha tthe image is there but the canvas is huge. Had to demagnify to find it. I need to do some cropping.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: SVG File won't show up in browsers

Postby Lazur » Tue Nov 05, 2013 10:47 am

Croppedsuperpanda:
SVG Image
Couldn't resist to make some cleanup.
Last edited by Lazur URH on Tue Nov 05, 2013 11:17 am, edited 1 time in total.

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 11:14 am

Okay, problem solved you can see it here: http://www.boonestoons.com/purplepandaAGAIN.svg

It was a document canvas side thing.

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Tue Nov 05, 2013 2:59 pm

Thanks Lazur, how does it look? Functional as a scalable thing?

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: SVG File won't show up in browsers

Postby Lazur » Tue Nov 05, 2013 9:47 pm

The autotrace results in the outlines reproduced with all of the shades, even though the image itself contains 3 different one only.
So it gives a sharper look/works better as a vector drawing, if you use only a black outline, and fills -with their edges hidden- below it.
Here is an svg with that being corrected:
SVG Image

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Wed Nov 06, 2013 12:28 am

Thanks Lazur but I only get half of what you're saying. mayhaps I need a glossary to clear the words.

"even though the image itself contains 3 different one only"
Three different 'one'?

"if you use only a black outline, and fills -with their edges hidden- below it"

'fills'? Please explain this process.

The corrected svg you did is awesome. I have to launch this product with my marketers this weekend and I'll be done with all the color and packaging by Wednesday evening. Any extra tips on how to do a better job I'm really thankful for.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: SVG File won't show up in browsers

Postby Lazur » Wed Nov 06, 2013 1:18 am

Didn't say 3 colours as the three shades are purple, black and white; I wanted to refer to those with the "one".

Your image has a solid black outline graphically, but the autotrace doesn't work alike.
It keeps tracing such outlines with shades between their colour and the background colour.
While you would need only one path for the black outline, and nothing else for it.

Then you can add the coloured areas as it was a colouring book image.
By making the outline path on the top and paths for the white and purple fills below it, with their edges overlapping a bit, you can have a clean look.
That's how the technical part goes.

How to improve the job more is all just opinions.
Actually I couldn't tell if that was a panda by the look.
Pandas are black and white, big fat and lazy creatures.
I have no idea how one could look muscular, wear a purple costume with white cape and white underwear outside,
being in that pose.
Also with the head -it's too big for the body.

Doing a better job -what's the job with the image?

Evolbaby
Posts: 42
Joined: Wed Jul 10, 2013 6:29 am

Re: SVG File won't show up in browsers

Postby Evolbaby » Mon Nov 11, 2013 2:26 pm

Thanks Lazur again.

This wasn't a finished image, just something to see if the colors and conversion worked. When we cartoonists draw anthropomorphic characters they're not always in proportion to the way they look in the wild or Bugs Bunny would be just a foot tall.

Here's where the toon is displayed as it's an ad for a package of vector toons. Let me know which package looks the best.

Image

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: SVG File won't show up in browsers

Postby Lazur » Tue Nov 12, 2013 12:00 pm

The one on the left is more legible, however the other's background's character is more eye catching.
I can't choose which one is better.


Return to “General Discussions”