3

So I have two of the same images one is a SVG and the other one is a PNG. I used Inkscape to export the PNG from the SVG. The dilemma that I am stuck with is that on the SVG the blue lines go much farther past the actually text which is something that I do not want to happen and would like the SVG look exactly like to PNG.

Thanks, Alex

Improve this question

2 Answers 2

Reset to default
5

Your font was replaced.

Compare each character and you will see some slight differences. The browser is responsible for rendering an SVG file. If it doesn't have access to a font, or if it doesn't understand the font specification, it'll revert to a fallback.

The solution is to convert the text to paths with Ctrl + Shift + C. This will make your text un-editable, but it will be rendered correctly.

As a general rule, I always convert text to paths in SVG files intended for the web. I typically use layers, so that one layer has the editable text. I then duplicate it, hide the original, and do the conversion. This way, I can edit the text again if I need to.

Improve this answer
4
  • Unfortunately, this will invalidate some of the advantages of using SVG in the first place, as file size, texts which can be searched for, which can be automatically translated, which can be made audible by tools or transformed otherwise by devices for blind people. Other advantages are, that corrections are more easy on text as text. Saving a backup before transforming have other disadvantages, as more storage space, managing two instead of one file, determining the workflow ...
    – user unknown
    Sep 9, 2016 at 17:07
  • Oh, after reading again, I see that I've overseen the layer with storing the text invisbly. I guess in background color or in a layer below an otherwise background layer?
    – user unknown
    Sep 9, 2016 at 17:15
  • 1
    @userunknown You are right about the advantages/disadvantages. To the best of my knowledge, there isn't a way to get consistent rendering of text in SVG's produced by Inkscape if the user doesn't have that font on their system, which is why I usually just change the text to paths. Whether or not it's the best method, it's one that at least works without headaches. See Embedding fonts in Inkscape
    – Scribblemacher
    Sep 9, 2016 at 17:26
  • 1
    I agree and wish, there would be better rendering in browsers. Maybe open reference fonts which could be used via the web or downloaded once to your local platform - if you like or need to use something else, you could still do it. Hopes, fantasies...
    – user unknown
    Sep 9, 2016 at 17:40
-1

First of all - the look of the SVG file depends on how the current software renders it. It means that Explorer can render it differently than Chrome, and FireFox will render it slightly another way... Anyway - if you want to use the svg file in other software than Inkscape - save it as PLAIN svg (and non Inkscape svg)

Improve this answer
8
  • 1
    Actually using plain SVG shouldn't make a difference. The difference between plain and Inkscape SVG is that the Inkscape version has some additional namespaced information stored (which is perfectly valid SVG and should be acceptable to any SVG renderer--it'll just be ignored).
    – Scribblemacher
    Sep 9, 2016 at 12:03
  • 1
    1. First of all - convert text to path it's not a solution for the WEB. The text in the web should be indexed! 2. That's right that using plain SVG SHOULDN'T make any difference, but from my experience - it sometimes does (otherwise I wouldn't mention this).
    – LDCO
    Sep 9, 2016 at 13:54
  • 1
    Keeping the original text in a different layer as I suggest keeps the original text in the file (assuming search engines actually index content in SVG files), which would address #1. For #2, I'd love to see an example (that's a serious, not a snarky, request). I've been using Inkscape for years and never found a benefit to using plain SVG.
    – Scribblemacher
    Sep 9, 2016 at 14:28
  • Why "assuming" (in "assuming search engines actually index...")? Example from my everyday workflow - when I import inkscape svg to blender - it must be a plain svg.
    – LDCO
    Sep 9, 2016 at 14:32
  • 1
    By away - hiding the editable text in the svg is HIGHLY WRONG - it can be seen like a black SEO by the google, and make you ban. Don't mention that it's just a very unprofessional workaround. It's like baking image with text and put the text in the "alt" tag,,,
    – LDCO
    Sep 9, 2016 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.