2

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.

  • You could have drawn outside the border. What happens if you open the SVG directly in the browser (Adressbar: file:///home/user318/foo/bar/logo.svg)? Which browser? Open just the SVG from the online location (mywebspace/foo/bar/logo.svg)? – user unknown Jul 11 '16 at 12:11
  • Can you post the url of your webpage? – Paolo Gibellini Jul 14 '16 at 12:26
5

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy