en utilisant inkscape svg en html sur web

Question

J'utilise inkscape .91 et je voudrais créer un svg que je peux utiliser sur le web. Je suis un débutant.

Je peux l'exporter en png - pas de problème mais je n'ai aucune idée de comment l'inclure dans le web comme SVG qui, puisque je veux un site responsive, est assez important. J'ai essayé d'utiliser le tag img mais je n'ai rien. J'ai édité le xml et changé standalone = 'non' en standalone = 'oui' sans chance. Essayé d'ajouter largeur/hauteur à img tag, ...

Je suis perplexe, quelqu'un peut-il aider.

svg est ci-dessous et à outtopastureenterprises.com/exper/modal/Not_Love_Heart_SVG.svg

Merci.

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

Chargez votre image dans Inkscape et effectuez un zoom arrière. Zoom moyen, moyen de sortir.

Voilà, continuez.

Finalement, vous verrez quelque chose comme ceci:

Voir cette petite boîte façon là-bas à droite? C'est là que tu devrais dessiner ta photo. Pas dans l'espace.

Si vous déplacez votre illustration à l'endroit où elle est censée être, vous remarquerez qu'elle ne correspond pas tout à fait à la limite de la page. Corrigez cela en modifiant la taille de votre document (Fichier »Propriétés du document) à 806x806 pixels et en centrant le dessin dans la page. Cela devrait régler le problème. Puis, enregistrez le fichier en tant que "SVG ordinaire". Cela réduira la quantité de spraw inutiles qu'Inkscape ajoute à votre document, ce qui le rendra moins gourmand en bande passante. Une autre chose que vous pourriez faire avant d'enregistrer le fichier est de cliquer sur l'onglet "Sortie SVG" dans la fenêtre des préférences et de changer le paramètre "Précision numérique" en quelque chose de sensible comme 1 ou 2. Vous n'avez pas besoin de précision comme ça.