8

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>
LenB
  • 1,126
  • 2
  • 14
  • 31

2 Answers2

16

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:

Inkscape screen shot

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.

r3mainer
  • 23,981
  • 3
  • 51
  • 88
5

Here are my recommendations for embedding an svg in html.

1. Simplify shapes

Select all elements of the same color with this tool. Select all elements of the same color with this tool

Convert them into paths. Convert them into paths

Merge them. Merge them

2. Control the image size and position.

Document properties

Choose "Icon 16x16" as page size Choose "Icon 16x16" as page size

Select all the graphic elements and resize them to fit in the 16x16 pixel frame. Select all the graphic elements and resize them to fit in the 16x16 pixel frame

Check that there are no transformations. You can open the .svg file in a text editor to see if there are any "transorm" tags, the following steps will remove the scalings and translations. Check that there are no transformations

Select all and apply the "convert path to absolute" command Select all and apply the convert path to absolute command

Some transformations may remain after this step. Some transformations may remain after this step.

Choose the shape in question and apply a scaling of 100% having checked the box "Apply to each object separately" Apply scaling

Now your svg is cleaner. You can use File -> Clean Up Document to make it even cleaner.

3. Embedding in the HTML Copy the relevant part

Paste it into an svg symbol that you can call anywhere in your HTML. Here, I set the size of the icon to 40x40

And voilà!

<html>
<head>
<style>
#my-svg-symbols{
    display: none;
}
</style>
<svg id="my-svg-symbols" xmlns="http://www.w3.org/2000/svg">
<symbol id="my-symbol-name" viewBox="0 0 16 16">
    <circle
       style="fill:#000000;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"
       id="path835"
       cx="7.9999986"
       cy="7.9999986"
       r="7.0192308" />
    <path
       d="M 5.8618,3.169 C 5.6917,3.1689 5.5537,3.3068 5.5539,3.4769 5.5537,3.6471 5.6917,3.785 5.8618,3.7849 6.0316,3.7845 6.169,3.6467 6.1689,3.4769 6.169,3.3071 6.0316,3.1693 5.8618,3.169 Z m 3.134,0.1927 C 8.6455,3.3618 8.3616,3.6457 8.3614,3.996 8.3616,4.3463 8.6455,4.6303 8.9958,4.6304 9.3464,4.6308 9.6309,4.3467 9.631,3.996 9.6309,3.6454 9.3464,3.3613 8.9958,3.3617 Z M 5.7078,4.092 c -0.2974,0 -0.5384,0.241 -0.5384,0.5384 0,0.2974 0.241,0.5385 0.5384,0.5385 0.2974,0 0.5385,-0.2411 0.5385,-0.5385 C 6.2463,4.333 6.0052,4.092 5.7078,4.092 Z M 7.2803,4.5539 C 6.581,4.5565 6.0156,5.1242 6.0158,5.8234 6.016,5.9551 6.0367,6.086 6.0772,6.2113 5.9495,6.1834 5.8192,6.1693 5.6885,6.1692 4.6798,6.1694 3.8621,6.9871 3.8619,7.9958 3.8618,8.6902 4.2553,9.3246 4.8774,9.6331 4.7956,9.8419 4.7337,10.0579 4.6923,10.2784 4.3535,10.1805 4.0026,10.1311 3.6499,10.1311 c -0.5177,10e-5 -1.011,0.105 -1.4596,0.2948 -0.4486,0.1898 -0.475,0.5917 -0.2304,1.1113 0.4415,0.9378 1.2399,1.4636 2.1194,2.115 1.1641,0.8622 2.6284,1.288 5.1284,1.3442 3.0261,-0.9852 3.6558,-2.0102 5.1463,-4.0886 C 14.7527,9.9603 14.9653,9.3142 14.4753,9.107 13.9853,8.8997 13.4466,8.785 12.8812,8.785 12.3316,8.7851 11.7877,8.8958 11.2818,9.1106 10.6371,8.0262 9.469,7.3616 8.2075,7.3614 7.9463,7.3616 7.6859,7.3904 7.4309,7.4472 7.3918,7.3237 7.3396,7.2047 7.2753,7.0922 c 0.0031,0 0.0062,0 0.0093,0 0.7009,2e-4 1.2693,-0.5678 1.2696,-1.2688 2e-4,-0.7012 -0.5684,-1.2698 -1.2696,-1.2696 -0.0014,0 -0.0028,0 -0.0042,0 z m 4.6392,2.0385 c -0.5204,0 -0.9423,0.4219 -0.9423,0.9423 0,0.5205 0.4219,0.9424 0.9423,0.9424 0.5204,0 0.9423,-0.4219 0.9423,-0.9424 0,-0.5204 -0.4219,-0.9423 -0.9423,-0.9423 z"
       style="fill:#ffffff;fill-opacity:1;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"
       id="g873" />
    <path
       id="path837-1"
       d="M 7.9999808,0.5 C 3.863565,0.5 0.5,3.8640014 0.5,8.0009255 0.5,12.135998 3.863565,15.5 7.9999808,15.5 12.136447,15.5 15.5,12.135998 15.5,8.0009255 15.5,3.8640014 12.136447,0.5 7.9999808,0.5 Z m 0,0.8976946 c 3.6507972,0 6.6024282,2.9501037 6.6024282,6.6032309 0,3.6512925 -2.951631,6.6032815 -6.6024282,6.6032815 -3.6507649,0 -6.602399,-2.951989 -6.602399,-6.6032815 0,-3.6531272 2.9516341,-6.6032309 6.602399,-6.6032309 z"
       style="color:#000000;" />
</symbol>
</svg>
</head>
<body>
<div>
   <svg width="40" height="40" ><use href="#my-symbol-name"></use></svg>
</div>
</body>
</html>
Jerome Demantke
  • 161
  • 1
  • 8