Vielleicht ist der beste Weg, SVG zu verwenden, "Inline-SVG" – das heißt, SVG-Code direkt in Ihr HTML einzufügen. Es funktioniert hervorragend!
Siehe den Pen gpcDi von Chris Coyier (@chriscoyier) auf CodePen.
Ein Großteil dieser Serie wird sich mit all den großartigen Dingen befassen, die Sie mit Inline-SVG tun können, daher wollte ich sehr klar erklären, was es ist und wie es funktioniert.
Wenn Sie Bedenken haben, all diesen Code in Ihrem HTML zu haben, wissen Sie, dass
- Es manchmal Vorteile hat (schnell!)
- Es gibt Wege, es extern zu machen (auch schnell!)
Was ist, wenn ich das Inline-SVG verkleinern möchte, aber nicht möchte, dass es das Seitenverhältnis beibehält? Kann man ein Inline-SVG mit
position: absolutedehnen?Hallo Caroline,
Ja, das können Sie! Spielen Sie mit diesem Tester für preserveAspectRatio und Sie werden es verstehen.
Das ist ein Attribut des
<svg>selbst.Hallo, wenn ich versuche, den SVG-Code als Inline-HTML zu verwenden, ist er riesig, ist das normal? Ich möchte, dass er wie Ihr Code aussieht, aber er ist gigantisch. Es ist kein sehr kompliziertes Bild, nur eine Textzeile mit Schatten. Was mache ich falsch?
Ja, das kann definitiv normal sein. Sie sollten entweder die Breite und Höhe des SVG explizit im SVG-Code definieren (z. B.
) oder implizit in CSS (z. B.svg { height: 100px; width: 100px; }).Hallo, wenn ich SVG-Dateien in Sketch mit svgo oder online mit nano komprimiere, kann ich die SVG-Elemente nicht mehr stylen. Gibt es spezielle Einstellungen, die ich für das Komprimierungs-Plugin festlegen muss?
Hallo Matthias! Sie sollten die SVG-Datei in einem Code-Editor öffnen und prüfen, ob einige der Stile inline sind – wenn ja, entfernen Sie sie, und das sollte es Ihnen ermöglichen, Dinge in Ihrer Stylesheet zu ändern. :)
Danke für diesen Beitrag, Chris! Ich habe mich gefragt, was Best Practice bei SVG ist.