it-swarm.com.de

Wie kann ich eine Inkscape SVG-Datei für ein responsives Webdesign vorbereiten?

Ich habe ein Tutorial zu Treehouse über responsives Webdesign erstellt. An dieser Stelle im Tutorial werden wir gebeten, ein Bild in eine SVG-Datei umzuwandeln, damit es vollständig ansprechend skaliert werden kann.

Anstatt Adobe Illustrator zu verwenden, den ich nicht besitze, habe ich die Freeware Inkscape verwendet. Sobald das Bild konvertiert ist, werden wir aufgefordert, das Bild in einem Texteditor zu öffnen, die Anforderungen für Höhe und Breite aus der SVG-Deklaration zu entfernen und die Objektauswahl zu unserer Regel für die maximale Breite zu unserem CSS-Stil hinzuzufügen:

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

Nach dem Entfernen von Höhe und Breite reagiert das Bild jedoch nicht mehr, sondern wird wie folgt abgeschnitten:

enter image description here

Weiß jemand, welchen Fehler ich gemacht habe? Oder was hätte ich entfernen sollen?

Entschuldigung, wenn die Frage schon einmal gestellt wurde, kann ich sie nicht finden.

edit1, der 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="

Es ist die "Höhe" und "Breite" im ersten SVG-Tag, das ich entfernt habe.

19
user3009918

Die Tatsache, dass Sie gerade ein Rasterbild in Ihre SVG eingefügt haben, ist nicht der eigentliche Grund für das, was Sie sehen.

Das bedeutet nur, dass die Vorteile der Verwendung von Vektorgrafiken nicht sichtbar sind, wenn die Skalierung der SVG-Datei ordnungsgemäß funktioniert (siehe unten). Wenn Sie Vektorgrafiken vergrößern, erhalten Sie nicht die "Jaggies" (Blockiness), die Sie beim Vergrößern von Bitmaps erhalten. Wenn Ihre SVG-Datei nur eine Bitmap enthält, verhält es sich ähnlich wie die Verwendung der Bitmap.

Das eigentliche Problem hier ist, dass Inkscape kein viewBox-Attribut in den SVGs enthält, die es speichert.

Wenn Sie die Attribute "Breite" und "Höhe" entfernen, wird standardmäßig "100%" verwendet. Dem Browser wird mitgeteilt, dass der SVG-Wert an den übergeordneten Container angepasst werden soll. Damit diese Skalierung funktioniert, muss der Browser leider wissen, wie groß der SVG-Inhalt ist. Dafür gibt es das viewBox-Attribut.

Illustrator fügt das viewBox-Attribut hinzu, Inkscape nicht.

Um zu verstehen, was ich meine, fügen Sie Ihrem <svg>-Tag nach dem Entfernen von Breite und Höhe Folgendes hinzu:

viewBox="0 0 319 177"

Sie sollten feststellen, dass Ihr Bild nicht mehr abgeschnitten ist und die Größe der Seite geändert wird, wenn die Größe der Seite geändert wird.

17
Paul LeBeau

Inkscape bietet jetzt eine Option zum Aktivieren von viewbox, wenn Sie die Datei als "optimiertes svg" speichern. Sehr praktisch!

32
qed

Wie Sie können lesen Sie es hier (und zum Ausfüllen qeds Antwort ):

  1. Wählen Sie die zu exportierenden Objekte aus
  2. Öffnen Sie das Dokumenteigenschaftenfenster ( Ctrl+Shift+D)
  3. Wählen Sie "Seitengröße an Zeichnung oder Auswahl anpassen"
  4. Datei> Als Kopie speichern ...
  5. Wählen Sie als Format Optimiertes SVG
0
Barna Tekse
  • Sie haben etwas falsch gemacht, wenn Sie Raster in Vektorgrafiken "konvertieren". Ich habe Inkscape nicht verwendet, kann ich nicht sagen, aber zumindest laut Wikipedia ist es nicht in der Lage, Konvertierungen durchzuführen. 

  • Sie haben noch nichts konvertiert, Ihr Bild ist im Graphics Interchange Format!

Um zu sehen, wie eine "echte" SVG-Datei aussieht, öffnen Sie das Beispiel auf der Wiki-Seite .

0
Okuma.Scott