SVG File won't show up in browsers
SVG File won't show up in browsers
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.
Thanks.
Re: SVG File won't show up in browsers
Oh, sometimes the browser wont even open up.
Re: SVG File won't show up in browsers
> 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 ?
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 ?
Re: SVG File won't show up in browsers
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.
-
- Posts: 2344
- Joined: Sun Apr 14, 2013 12:04 pm
- Location: Michigan, USA
Re: SVG File won't show up in browsers
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 "
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/
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/
Re: SVG File won't show up in browsers
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 ?
Re: SVG File won't show up in browsers
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
Here's the file:
http://www.boonestoons.com/colorsuperpanda.svg
It's a conversion from a jpeg exported by gimp
Re: SVG File won't show up in browsers
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.
Re: SVG File won't show up in browsers
Last edited by Lazur URH on Tue Nov 05, 2013 11:17 am, edited 1 time in total.
Re: SVG File won't show up in browsers
Okay, problem solved you can see it here: http://www.boonestoons.com/purplepandaAGAIN.svg
It was a document canvas side thing.
It was a document canvas side thing.
Re: SVG File won't show up in browsers
Thanks Lazur, how does it look? Functional as a scalable thing?
Re: SVG File won't show up in browsers
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:
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:
Re: SVG File won't show up in browsers
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.
"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.
Re: SVG File won't show up in browsers
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?
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?
Re: SVG File won't show up in browsers
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.
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.
Re: SVG File won't show up in browsers
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.
I can't choose which one is better.