Publishing SVG file - In browser image only shows partly

Saskia1770 · Postby **Saskia1770** » Tue Sep 17, 2013 8:19 am

Hello all,

Hope someone can help me out with the following problem im having.

Ive created an image in inkscap i'd like to use on my website. It is a svg file. Now when i refer to the file in my html it shows in the browser but it only shows parts of the image.

I've tried to select all components of the image and group them, then save the file again to make sure all components of the image where on the same layer. I've also tried to use Gimp to change the bits that didn't show but i haven't found an option to save a svg file in Gimp. I've also tried to copy/paste the main parts of the image again in a new svg file but that only showed the same problem.

Im a 100% it has to do with the way i have drawn the image, but im obviously not sure how to fix it.

I've attached some visual for you. Image 1 is obviously how i'd like it to display. And the second image (to the left) is how it shows in the browser. The bottom image to the right shows how the file looks when i open it in Gimp.

Im very grateful for any help i might receive.

Thanks for reading and have a great day!

Saskia

v1nce · Postby **v1nce** » Tue Sep 17, 2013 8:37 am

Hi,

Which browser ? Any url or svg so we could look at what's wrong ?

Saskia1770 · Postby **Saskia1770** » Tue Sep 17, 2013 2:48 pm

Hi Vince,

Thank you for your quick reply and wanting to have a look at my issue

I am using Firefox but it shows the same in Internet Explorer. Because my website is far from being live yet, i dont have a link for you. However i've attached the .svg file i am working with.

* file deleted as no longer necessary *

Saskia1770 · Postby **Saskia1770** » Tue Sep 17, 2013 3:46 pm

OMG i worked it out!!! YAY!!!

First of all i'd like to apologize to everyone for posting this thread in the wrong place! I was browsing for information and a solution and was not aware i actually posted it in the tutorials bit! Sorry! :oops:

But while this post is here already i thought i might as well share with you how simple a solution i came up with.

In my HTML i am mostly working with svg files- i know that the ones i create in Inkscape definately have a transparant background. But for some reason i thought when saving the file as a .png it would give it a white background. NOT! I just converted my svg file into a png to see if it would work for some reason and tadaaa....it shows the complete picture!

For sure I still have lots to learn in Inkscape - using the svg file shows me i haven't drawn correctly - but...at least i can use the image now

Thanks again to Vince for wanting to give me a hand and next time i'll wait just that little longer to post and annoy everyone and also...when i do post i make sure its in the correct spot.

Just hoping maybe one day it might help someone else out too ...

And remember: whenever you get frustrated - like me sometimes - remember to keep smiling, this is all suppose to be fun!

Take care,
Saskia

v1nce · Postby **v1nce** » Tue Sep 17, 2013 6:31 pm

Great.

It's fine you managed to get a working image.
But AIUI you exported it as a png so you loose most of the benefits of having your source image in a vector format.
Too bad you removed your svg coz I don't see any obvious reason why the image doesn't show as it displays what is probably the most complex aspect of image (the blur) but fails with gradient which is simpler. I was curious about what was wrong.

Saskia1770 · Postby **Saskia1770** » Tue Sep 17, 2013 10:21 pm

Sorry Vince....

I guess i should've left my image there because now ive edited the file and im encountering the same problem again! I am doing something im not suppose to do but i dont know what it is and now just making it a png file doesn't work....aaaarghh!!!

If you are still keen to have look i have added the file again

Cheers,
Saskia

Saskia1770 · Postby **Saskia1770** » Tue Sep 17, 2013 10:24 pm

see attached

tylerdurden · Postby **tylerdurden** » Tue Sep 17, 2013 10:54 pm

Here, I have taken the liberty to bring the name to the foreground for emphasis and changed the text below to path. A white rectangle was added behind all. Looks ok in FF and Chrome.

Lazur · Postby **Lazur** » Tue Sep 17, 2013 10:58 pm

I was just about to write that the "WEB DESIGN" part was created as a flowed text.
Flowed texts are not part of the current svg specification, they are not rendered by other porgrams.

By the way, there are a lot of small details that are off -if you use that svg design at your page, you will let everyone to look at those too.
Personally I would only use fills and no outlines for web content, by converting each stroke to outlines.

Saskia1770 · Postby **Saskia1770** » Wed Sep 18, 2013 7:17 am

Hi Lazur,

Thank you for your post

However, im not sure i understand you. I work with Inkscape the best i can at this moment. Im just learning the program. Im not finished with the logo yet and i agree that once it will be on my website i dont want everyone that looks at it t see any fault (they may not like it but thats something else).

I would appreciate it if you could tell me what a flowed text is and how it is different to the 'Saskia' part. In my idea i've created them the same way just using the tool text :tool_text:

Also i am not aware of the diference between fills and outlines as you mention. In this image ive mainly used the bezier tool and the circle and square shapes: :tool_pen:

And to adjust them i used fill and stroke and for the lines i edited the nodes :tool_node:

I agree there must be lots of little mistakes because when they dont do what i want i try to tweak things as best i can with the specific buttons within that tool.

Im very curious to learn more about what you said and to get rid off all the many small details that are off!! If you would be interested to expand and teach me im most grateful to you

Cheers,
Saskia

Lazur · Postby **Lazur** » Wed Sep 18, 2013 8:20 am

Here is the manual part on the flowed-nonflowed text:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Text-Creating.html

I said I wouldn't use strokes. They are not always rendered right in the browsers.

Changed some parts a bit in this svg.
Used the convert stroke to path (Ctrl+Alt+C), break apart (Ctrl+Shift+K) and some editing on the eyes.
Retraced the usb plug with rectangles, converted them to paths (Ctrl+Shift+C), combined the two symmetric ones at the bottom (Ctrl+K),
and used the align and distribute panel (Ctrl+Shift+A) and added the parts together (Ctrl++) in a nutshell.

More details to be corrected -technically- are at the mouse buttons and on the brush.

It is something you have to experienvce with some.
Brynn created a great collection of tutorials, that can help you with learning:
http://forum.inkscapecommunity.com/index.php

Good luck!

MELISSA · Postby **MELISSA** » Thu Mar 31, 2016 9:14 pm

Hi, convert the whole image, or each object in your image to text (even if it not text), then it can be saved as a svg. and be used n a website as a svg.

This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at inkscape.org/forums

This is a read-only archive of the inkscapeforum.com site. This feature is no longer available.

InkscapeForum.com

Publishing SVG file - In browser image only shows partly

Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Re: Publishing SVG file - In browser image only shows partly

Who is online