: Svg image looks odd in html page 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

@Kaufman565

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.

Vote Up Vote Down

@Vandalay110

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)

Vote Up Vote Down