using inkscape svg in html on web

Question

I'm using inkscape .91 and would like to create an svg which I can use on the web. I'm a newbie.

I can export it in png - no problem but have no idea how to include it in the web as SVG which, since I want a responsive site, is quite important. I've tried using the img tag but get nothing. I've edited the xml and changed standalone='no' to standalone='yes' with no luck. Tried adding width/height to img tag, ...

I'm stumped, can someone help.

svg is below and at outtopastureenterprises.com/exper/modal/Not_Love_Heart_SVG.svg

Thanks.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.0"
   width="645"
   height="585"
   id="svg2"
   inkscape:version="0.91 r13725"
   sodipodi:docname="Not_Love_Heart_SVG.svg">
  <metadata
     id="metadata4194">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1550"
     inkscape:window-height="817"
     id="namedview4192"
     showgrid="false"
     inkscape:zoom="0.4034188"
     inkscape:cx="-31981.512"
     inkscape:cy="292.5"
     inkscape:window-x="96"
     inkscape:window-y="81"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2" />
  <defs
     id="defs4" />
  <g
     id="layer1"
     transform="translate(-32549.301,4.9576272)"
     style="opacity:1"
     inkscape:export-xdpi="90"
     inkscape:export-ydpi="90">
    <path
       d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 c 42.49329,-0.234834 51.43863,4.7197234 76.43471,18.4518354 30.42451,16.714318 61.7399,52.435708 68.21323,77.810591 l 3.9981,15.6724 9.85963,-21.584508 c 55.71617,-121.972928 233.59836,-120.148052 295.50229,3.031588 19.63767,39.07605 21.79364,122.51317 4.38012,169.51287 -22.71527,61.30937 -65.38001,108.05053 -164.00634,179.67658 -64.68082,46.97364 -137.88474,118.04586 -142.98067,128.02803 -5.91548,11.58753 -0.28216,1.8159 -26.40808,-27.46078 z"
       id="path2417"
       style="fill:#ff0000"
       inkscape:connector-curvature="0" />
    <g
       transform="translate(129.28571,-64.285714)"
       id="g2221"
       style="" />
  </g>
  <circle
     style="opacity:1;fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:63.969;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     id="path4775"
     cx="-32225.816"
     cy="262.75424"
     r="370.99817"
     inkscape:export-xdpi="90"
     inkscape:export-ydpi="90" />
  <path
     style="opacity:1;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:85.313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m -32507.316,538.23981 565.479,-506.352496"
     id="path4777"
     inkscape:connector-curvature="0"
     inkscape:export-xdpi="90"
     inkscape:export-ydpi="90" />
</svg>

Answer 1

Load up your image in Inkscape and zoom out. Zoom way, way out.

That's it, keep going.

Eventually you'll see something like this:

See that little box way over there on the right? That's where you should be drawing your picture. Not in outer space.

If you move your artwork to where it's supposed to be, you'll notice that it doesn't quite fit inside the page boundary. Fix this by changing the size of your document (File » Document Properties) to 806x806 pixels and centring the drawing in the page. That should fix the problem.

Then save the file as a "Plain SVG". This will reduce the amount of unnecessary spew that Inkscape adds to your document, making it take up less bandwidth. Another thing you could do before saving the file is click on the "SVG output" tab in the preferences window and change the "Numeric precision" setting to something sensible like 1 or 2. You don't need micro-pixel precision in a file like this.