Inkscape - When saving as SVG and uploading to web, nothing shows


Question

I'm really new to Inkscape and I'm having problems exporting my file for use on a webpage. I've created a logo and exported it as a SVG by doing the following:

File -> Save As -> Optimized SVG (default settings).

The file's name is logo.svg and so in my HTML for my website I've simply done , but the problem is nothing shows up. If I replace logo.svg with facebook.svg (something I got online) then that shows perfectly, so my issue lies within exporting it incorrectly.

The logo is made up of 2 text objects and an elipsis object used to add a shine to part of the text, and nothing else. What could I have done wrong during saving?

Any help is appreciated.

1
2
7/9/2016 8:12:00 PM

Without seeing the SVG, it's hard to say, but here are some possibilities:

Did you drew outside the drawing area?

Open the file and press Ctrl+Shift+D. There's an option to re-size based on the drawing.

Did you use a <flowRoot>?

There are two ways to add text.

  1. Click once, then start typing (this creates an <svg:text>)
  2. Click and drag, then type (this creates a <flowRoot>

While the latter lets you create a text box that wraps, it's not a standard SVG feature and many browsers ignore it.

To fix it select the object. Then, on the Text menu, click Convert to text.

Convert the text to path

It's important to note that SVG files do not embed fonts. If the user doesn't have the font, it may be replaced in ways you wouldn't expect. For things like logos, you definitely don't want your font to be substituted.

The solution is to convert the text to a path. Select the object. Then on the Path menu, click Object to Path.

You will no longer be able to edit the text, but it will be rendered by browsers exactly as you see it. If you use the Node tool F2 and hover over the letters, you'll see that the are all now individual paths.

Bonus: Tip

If you have an image where you might want to edit text later, but also want to convert to paths, you don't need to save two separate files (although that works too). What I sometimes do is save the text in a separate layer. When I want to convert everything to paths, I duplicate the text layer, convert it, then hide the original. This way, I can still keep the text if I need to edit it later.

5
12/6/2016 4:38:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^