在web上的html中使用inkscape svg

Question

我正在使用inkscape .91并想创建一个我可以在网上使用的svg.我是新手.

我可以在png中导出它 - 没问题,但不知道如何将它作为SVG包含在网络中,因为我想要一个响应式网站,这非常重要.我已经尝试过使用img标签但什么都没得到.我已经编辑了xml并将standalone ='no'更改为standalone ='yes'而没有运气.尝试添加宽度/高度到img标签,...

我很难过,有人可以帮帮忙.

svg位于以下位置,并且位于outtopasture很多时候,不列颠哥伦比亚省/英国国家/地区

谢谢.

<?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

在Inkscape中加载图像并缩小.出路,出路.

就是这样,继续前进.

最终你会看到这样的事情:

在那边看到那个小盒子的方式？这就是你应该画画的地方.不在外太空.

如果您将图稿移动到它应该的位置,您会发现它不太适合页面边界.通过将文档的大小(文件»文档属性)更改为806x806像素并将图形居中在页面中来解决此问题.这应该解决问题.

然后将文件另存为"Plain SVG".这将减少Inkscape为您的文档添加的不必要的喷射量,从而减少带宽占用.保存文件之前可以执行的另一件事是单击首选项窗口中的"SVG输出"选项卡,并将"数字精度"设置更改为合理的值,如1或2.您不需要文件中的微像素精度像这样.

Answer 2

以下是我在 html 中嵌入 svg 的建议。

\n

1. 简化形状

\n

使用此工具选择所有相同颜色的元素。\n

\n

将它们转换为路径。\n

\n

合并它们。\n

\n

2. 控制图像大小和位置。

\n

\n

选择“ Icon 16x16 ”作为页面大小\n

\n

选择所有图形元素并调整它们的大小以适合 16x16 像素框架。\n

\n

检查是否没有转换。\n您可以在文本编辑器中打开 .svg 文件以查看是否有任何“ transorm ”标记，\n以下步骤将删除缩放和平移。\n

\n

选择全部并应用“将路径转换为绝对路径”命令\n

\n

此步骤之后可能仍会保留一些转换。\n

\n

选择有问题的形状，并在选中“分别应用于每个对象”框后应用 100% 的缩放\n

\n

现在您的 svg 更干净了。\n您可以使用“文件”->“清理文档”使其更加干净。

\n

3. 嵌入HTML \n

\n

将其粘贴到 svg符号中，您可以在 HTML 中的任何位置调用该符号。\n这里，我将图标的大小设置为 40x40

\n

瞧\xc3\xa0！

\n

\r\n

\r\n

<html>\n<head>\n<style>\n#my-svg-symbols{\n    display: none;\n}\n</style>\n<svg id="my-svg-symbols" xmlns="http://www.w3.org/2000/svg">\n<symbol id="my-symbol-name" viewBox="0 0 16 16">\n    <circle\n       style="fill:#000000;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"\n       id="path835"\n       cx="7.9999986"\n       cy="7.9999986"\n       r="7.0192308" />\n    <path\n       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"\n       style="fill:#ffffff;fill-opacity:1;stroke-width:0.516923;stroke-linecap:round;stroke-linejoin:round"\n       id="g873" />\n    <path\n       id="path837-1"\n       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"\n       style="color:#000000;" />\n</symbol>\n</svg>\n</head>\n<body>\n<div>\n   <svg width="40" height="40" ><use href="#my-symbol-name"></use></svg>\n</div>\n</body>\n</html>

\r\n

\r\n

\r\n

\n