2015-09-27 99 views
2

我使用的是inkscape .91,並且想創建一個我可以在網絡上使用的svg。我是新手。在網頁的html上使用inkscape svg

我可以導出它在PNG - 沒問題,但不知道如何將它包含在網絡中作爲SVG,因爲我想要一個響應網站,是非常重要的。我嘗試過使用img標籤,但什麼也沒得到。我編輯了xml並將standalone ='no'更改爲standalone ='yes',但沒有運氣。試圖添加寬度/高度img標記,...

我很難過,有人可以幫忙。

SVG低於在outtopastureenterprises.com/exper/modal/Not_Love_Heart_SVG.svg

感謝。

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

回答

5

在Inkscape中加載圖像並縮小。放大方式,出路。

就是這樣,繼續前進。

最終你會看到這樣的內容:

Inkscape screen shot

請參見小盒子的方式在那邊好嗎?這就是你應該繪製你的照片的地方。不在外太空。

如果你移動你的作品給它應該是,你會發現,它不會在頁面邊界內頗爲契合。通過將文檔大小(文件»文檔屬性)更改爲806x806像素並將圖形居中放在頁面中來解決此問題。這應該解決問題。

然後將該文件另存爲「普通SVG」。這將減少Inkscape爲您的文檔增加的不必要的花費,使其佔用更少的帶寬。你可以保存文件之前做的另一件事是請在選項窗口的「SVG輸出」選項卡上,改變了「數字精度」設置爲像1或2理智的東西你不需要在文件中微像素精度喜歡這個。