I'm trying to insert an svg image that I created in Inkscape into my html web page but for some reason I can't get it to render correctly.

Is there some sort of extra exporting step to get an SVG image to html page?

Example img:

What its supposed to look like example2


Save as optimized SVG. In particular, in Illustrator, don't use "Save as", use File > Export > Export for Screens .... Then select SVG as format .


Set the screen width and height to 100% as given below:

  <svg height="100%" width="100%" viewBox="0 0 1550 1200" preserveAspectRatio="none">
    <!---Your code here-->

As Camilla said, export it as screen. I tried so many ways the svg still not show up, and now is working fine after I export it in illustrator as screen


Ok, so I figured it out. If google brought you here hi, post a comment to let me know ^.^

This tutorial was very helpful, look at section 2.2


  • Your question is impossible to answer without looking at your files and your answer doesn't tell what you did to solve it. Self-answering is fine but you have to comply with the guidelines on help center. Can you please fix both? Otherwise the question will probably be deleted and this answer will get downvoted. – Luciano Jan 3 '18 at 16:35

Your Answer

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

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