web-dev-qa-db-fra.com

Comment préparer un fichier Inkscape SVG pour une conception Web réactive?

J'ai fait un tutoriel sur Treehouse sur le web responsive. À ce stade du didacticiel, il nous est demandé de convertir une image en svg afin qu'elle puisse être redimensionnée de manière totalement réactive.

Plutôt que d’utiliser Adobe Illustrator, que je ne possède pas, j’ai utilisé le logiciel gratuit Inkscape. Une fois l'image convertie, il vous est demandé d'ouvrir l'image dans un éditeur de texte, de supprimer les exigences de hauteur et de largeur de la déclaration svg et d'ajouter le sélecteur d'objet à notre règle de largeur maximale à notre style css:

  img, object {
max-width: 100%;
}

Cependant, après avoir supprimé la hauteur et la largeur, l'image n'est pas réactive, mais étrangement tronquée, comme ceci:

enter image description here

Est-ce que quelqu'un sait quelle erreur j'ai faite? Ou ce que j'aurais dû enlever?

Désolé si la question a déjà été posée, je ne la trouve pas.

edit1, le code:

<?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:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   width="319"
   height="177"
   sodipodi:docname="logo.gif">
  <metadata
     id="metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     width="319"
     height="177"
     xlink:href="

C'est la "hauteur" et la "largeur" ​​de la première balise SVG que j'ai supprimée.

csssvgresponsive-designinkscape
19
user3009918

Le fait que vous veniez de placer une image raster dans votre fichier SVG n'est pas la raison réelle de ce que vous voyez.

Cela signifie simplement que lorsque la mise à l'échelle du SVG fonctionne correctement (voir ci-dessous), vous ne verrez pas les avantages de l'utilisation d'illustrations vectorielles. Lorsque vous redimensionnez des illustrations vectorielles, vous n'obtenez pas les "irrégularités" que vous obtenez lorsque vous redimensionnez des images bitmap. Si votre fichier SVG contient uniquement un bitmap, vous n’avez pratiquement pas la même utilisation que le bitmap.

Le problème actuel est qu'Inkscape n'inclut pas d'attribut viewBox dans les SVG qu'il enregistre.

Lorsque vous supprimez les attributs "width" et "height", la valeur par défaut est "100%". Ce qui indique au navigateur d’adapter le SVG à la taille du conteneur parent. Malheureusement, pour que cette mise à l'échelle fonctionne, le navigateur doit savoir quelles sont les dimensions du contenu SVG. C’est à cela que sert l’attribut viewBox.

Illustrator ajoute l'attribut viewBox, pas Inkscape.

Pour voir ce que je veux dire, ajoutez ce qui suit à votre balise <svg> après avoir supprimé la largeur et la hauteur:

viewBox="0 0 319 177"

Vous devriez constater que votre image n'est plus découpée et sera redimensionnée lorsque la page sera redimensionnée.

17
Paul LeBeau

Inkscape propose désormais une option permettant d’afficher le fichier si vous enregistrez le fichier sous le nom "svg optimisé". Très pratique!

32
qed

Comme vous pouvez lisez-le ici (et pour avoir complété réponse de qed ):

  1. Sélectionnez le ou les objets à exporter
  2. Ouvrez la fenêtre de propriétés du document ( Ctrl+Shift+D)
  3. Sélectionnez "Redimensionner la page en dessin ou en sélection"
  4. Fichier> Enregistrer en tant que copie ...
  5. Sélectionnez SVG optimisé comme format
0
Barna Tekse

  • Vous avez commis une erreur si vous "convertissez" un raster en graphiques vectoriels. N'ayant pas utilisé Inkscape, je ne saurais le dire, mais au moins selon Wikipedia il n'est pas capable d'effectuer des conversions. 

  • Vous n'avez rien converti, votre image est au format Graphics Interchange Format!

Pour voir à quoi ressemble un "vrai" fichier SVG, ouvrez l'exemple depuis la page wiki .

0
Okuma.Scott