I've handcoded a logo for my website with SVG markup in a text editor: https://codepen.io/Deka87/pen/LQzgrz?editors=1000.

I saved its contents in a brand.svg file and tried to open it with Illustrator to save as a PNG image. I got no error messages (e.g. those that the svg is not valid), however it appeared as a blank white image there.

Is there anything I missed while handcoding the SVG? Any help would be highly appreciated.

1 Answer 1


Your code does not seem to work right on firefox ESR, or Inkscape either so im having a bit hard time deciding what it should look like. IE renders the image as:

enter image description here

Is this correct?

Your code is not valid according to W3C validator.

For starters you need to write svg 1.1 code since that is what you say you are doing. there is no such tag as def it should be defs. So you can not use href atributes in <use> tags you need to use xlink:href instead. If you do this you get into illustrator but the thinsg have wrong size (still dont work in inkscape though).

Second, you can not rely on CSS to style all your needs because illustrator won't support all CSS that a browser would. For example neither Firefox does noyt seem to do letter-spacing and illustrator wont do text-transform etc.

Anyway illustrator is not a SVG editor as such, and tends to not work well with handcrafted svg. But the fact that even inkscape 0.92 throws you off means you have serious problems.

  • Thanks for the thorough comment! IE renders it right. I have serious problems indeed as I only tested this in Chrome. While def -> defs seems something that is easy to fix, I need to check other points as well. Thanks again!
    – Deka87
    Feb 15, 2018 at 15:11
  • Just a quick update. I had to remove the commas to make the image appear as needed on Firefox and other browsers it didn't for in.
    – Deka87
    Feb 15, 2018 at 16:26
  • @Deka87 i noticed that though i think it was not because of comma but missing space. There may be a bug in illustrator though on the symbols
    – joojaa
    Feb 15, 2018 at 17:03
  • Removing commas and replacing def with defs fixed the view in other browsers, however Illustrator keeps showing a black circle anyway. SVG to PNG converters give me a black rectange for some reason too. I will keep on investigating this.
    – Deka87
    Feb 15, 2018 at 17:10
  • Illustrator at least the newest one will make the other elements if you change href to xlink:href (as the standard of 1.1 demands) ithey will just be the wrong size, its like illustrator defaults to width and height 100%
    – joojaa
    Feb 15, 2018 at 17:12

Your Answer

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

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