Es gibt ein paar verschiedene (rationale) Ansätze zur Größenbestimmung von SVG-Zeichenflächen.
Der Begriff "Zeichenfläche" bezieht sich hier auf das Konzept in Illustrator, also im Grunde den weißen Zeichenbereich, den man für das Dokument hat. Letztendlich bezieht er sich auf die viewBox in der tatsächlichen SVG-Ausgabe. Das ist für Frontend-Entwickler sehr wichtig, denn wenn es keine Konsistenz gibt, wird die Positionierung der SVGs immer ein wenig ein Kampf und schadet wirklich der Idee, dass SVG ein nützliches System ist.
Ich habe kürzlich auf einer Konferenz die Entwicklerin Emma Arce getroffen, die von einem sehr interessanten Gespräch in ihrem Team erzählte, als sie versuchten, sich auf etwas zu einigen und dies richtig zu machen. Hier ist meine Sicht auf die Situation.
Ansatz #1: Alle auf exakt gleiche Größe bringen
Wahrscheinlich werden Sie die Größe über CSS anwenden, daher ist die Größe der Zeichenfläche nicht sehr wichtig, aber die Abmessungen sollten identisch sein. So sieht das aus
Vorteile
Relative Größenbestimmung. Sie steuern direkt im Design des Icons selbst, wie es im Vergleich zu anderen Icons dimensioniert wird. Wenn Sie sie später in CSS alle gleich groß machen, behalten alle Icons dieses Größenverhältnis bei und sehen gut zusammen aus.
Nachteile
Richtungsbezogene Ausrichtung. Da auf jeder Seite eines beliebigen Icons eine willkürliche Menge an Weißraum vorhanden ist, ist es schwierig, Dinge am Rand eines Icons auszurichten oder einen konsistenten Abstand zwischen einem Icon und einem benachbarten Element zu erwarten.
Ansatz #2: Auf Ränder zuschneiden
Auch hier spielt die tatsächliche "Größe" der Zeichenfläche keine Rolle, da Sie die Größe wahrscheinlich sowieso über CSS anwenden werden, aber die Zeichenfläche sollte an allen Seiten an den Rand der Grafik stoßen. In Illustrator ist das ein einfacher Schritt
So sieht das aus
Vorteile
Ausrichtung und Positionierung. Wenn Sie ein Icon in der oberen rechten Ecke eines Elements positionieren möchten, wird es dort platziert und sieht gut und ausgerichtet aus. Es wird keinen seltsamen, willkürlichen Weißraum geben, für den Sie kompensieren müssen.
Nachteile
Inkonsistente Größenbestimmung. Alle Icons haben jetzt unterschiedliche Seitenverhältnisse. Das ist kein großes Problem für die Komplexität, da Sie sie immer noch mit CSS mit fester Breite/Höhe skalieren können und sie innerhalb dieses Bereichs zentriert werden (unter der Annahme eines Standardwertes preserveAspectRatio). Das wirkt sich jedoch auf ihre Größenbestimmung aus. Je näher das Seitenverhältnis eines beliebigen Icons einem Quadrat ist, desto größer erscheint es (es füllt den gegebenen Platz aus). Höhere oder breitere Icons müssen verkleinert werden, um in den Platz zu passen, und erscheinen kleiner. Daher ist eine konsistente und relativ zu anderen Icons ausgerichtete Größenbestimmung schwieriger.
Gewinner?
Ich fürchte, ich kann mich einfach nicht für eine entscheiden. Ich mag die Konsistenz der Positionierung von zugeschnittenen Icons wirklich, aber die inkonsistente Größenbestimmung kann mich verrückt machen. Und ich bin sicher, es würde genau umgekehrt funktionieren, wenn ich es ändern würde.
Weitere Überlegungen
Konsistenz durch Rahmen: Wenn Sie in jeder einzelnen Instanz der SVG-Nutzung das Icon innerhalb eines visuell definierten Rahmens platzieren, wird die Ausrichtung zu keinem Problem, da Sie die Rahmen ausrichten können und sie gut aussehen.
Sie können immer Einzelfälle lösen: Nehmen wir an, Sie haben eine wirklich lange und dünne Pfeilform. Sie können immer spezielles CSS nur für dieses eine Element verwenden. Ich würde kein ganzes System aufgrund einer Handvoll von Ausreißern ändern. Hier geht es um das System als Ganzes.
Ich persönlich habe exakte Größen verwendet. Das ist viel einfacher als Workflow, wenn man eine große Icon-Bibliothek hat, aber wichtiger ist, dass ich lieber das Verteilungsproblem umgehe, als zu versuchen, jede mögliche ViewBox-Größe zu pflegen.
Der andere Vorteil ist, dass Einzelfälle etwas einfacher sind. Ich habe festgestellt, dass das Zuschneiden der Zeichenfläche für Logos definitiv der richtige Weg ist.
Siri, erinnere mich daran, meinen Beitrag beim nächsten Mal Korrektur zu lesen.
Gibt es eine Möglichkeit, eine Menge von SVGs zu etwas wie einem "Sprite" zu kombinieren, so dass man nur eine einzige HTTP-Anfrage für alle seine Icons hat?
Wenn ja, wie geht man dabei vor? Wie bestimmt man, welches Icon wo erscheint? Danke.
SVG-Sprites sind fantastisch ... obwohl sie nicht ganz wie ein Sprite sind, das man normalerweise für JPEGs und PNGs verwendet.
http://lmgtfy.com/?q=svg+sprites
Obwohl es möglich ist, ist die Browserunterstützung für bestimmte Spriting-Techniken und Anwendungsfälle mangelhaft. Ich mag die :target-Methode, die in diesem SitePoint-Artikel über SVG-Sprites beschrieben wird, hatte aber Probleme mit der Unterstützung in bestimmten Browsern, insbesondere wenn sie als CSS-Hintergrund verwendet wurde. Chris hat einige gute Einschränkungen zur Unterstützung gepostet, die Sie vielleicht lesen möchten.
Ich würde die Verwendung von Sketch 3 für SVG (also wirklich für ALLE Ihre Webdesign-Bedürfnisse) *dringend* empfehlen ... damit macht der Umgang mit SVGs Freude und Sie müssen kein so schweres Werkzeug wie Illustrator verwenden.
Nur meine 0,02 €! Danke für den Beitrag, wie üblich!
Zeichenflächen können hilfreich sein, wenn ein konsistenter Weißraum um die Grafik herum eine Designüberlegung ist, zum Beispiel in Branding-Richtlinien.
Manchmal denke ich, ich muss einfach alles 256×256 und schön an die Ränder schmiegen. Dann erinnere ich mich, dass ich sie mit CSS entsprechend skalieren kann und mein Padding oder was auch immer den Rest erledigt.
Wenn Sie nur etablierte Standards verwenden würden, wüssten Sie, dass die Größe relativ zum Bildschirm ist, der für HD-Displays 1920 x 1080 beträgt.
Übrigens Chris; svgdesign.guru ist eine URL
Toller Artikel, danke Chris! Mein Team und ich haben beschlossen, unsere Bilder in zwei Kategorien einzuteilen: Icons und Symbole. Für Icons planen wir 100 x 100 Pixel große Zeichenflächen zu verwenden, und für alles andere (Symbole) werden wir die Grafik auf ihre Ränder zuschneiden. Es ist keine perfekte Lösung, aber ich denke, es ist im Moment die beste Lösung.
Eine willkürliche Regel, aber ich würde entscheiden, ob das Projekt eher regelmäßig proportionierte (wahrscheinlich quadratische, aber eigentlich meine ich konsistente) Icons oder unregelmäßig proportionierte Icons haben wird. Wenn die meisten Icons regelmäßig sind, dann ergibt die Einführung einer konsistenten Größe Sinn, da Sie weniger Ausnahmen haben, um die herum Sie Code schreiben müssen, und Konsistenz hilfreich ist. Ebenso, wenn die meisten Ihrer Icons unregelmäßig sind, warum dann eine Einschränkung auferlegen, gegen die Sie ständig kämpfen werden.
Die meisten Websites werden wahrscheinlich konsistent quadratische Icons haben, daher können wir die Ausnahmen mit etwas Maskierung handhaben.
Toller Artikel, Chris! Es scheint, dass eine Kombination von Ansätzen die Lösung sein könnte, da kein einzelner Ansatz für jede Situation perfekt ist. Ähnlich wie Emma oben erwähnt hat: Gruppieren von SVGs nach ihrer Funktion und Anpassung Ihres Ansatzes für jede Gruppe.
Sehr nachdenklicher Beitrag!
Wenn Sie wirklich zwischen Icons mit passender Größe und Seitenverhältnis und Icons, die so groß sind, wie sie für die Einbettung in den natürlichen Textfluss benötigt werden, wechseln möchten, könnten Sie verschachtelte <symbol>-Elemente verwenden. Das innere Symbol wäre auf die Grafikdimensionen zugeschnitten, aber dann könnte es <use>d werden, um es in ein anderes Symbol mit dem Standard-ViewBox-Seitenverhältnis einzufügen.
Natürlich könnten Sie
preserveAspectRatio-Werte für jeden Symboltyp angeben, wenn Sie ein anderes Verhalten als die Zentrierung innerhalb des SVG in beide Richtungen wünschen.Für die tatsächliche Implementierung in Illustrator möchten Sie die Technik zum Zuschneiden der Zeichenfläche auf den Grafikrand verwenden, um die "ursprünglichen" ViewBoxes zu generieren, und dann in einem XML-Editor für die Positionierung und Größenbestimmung der Standardversionen arbeiten.
PS Chris, wann reparieren Sie den Konflikt zwischen Markdown-Parser und Code-Sanitizer? Code in reinem HTML zu schreiben ist einfach ärgerlich...
Ich glaube, ich habe es zuerst in einer älteren Version der Android-Icon-Richtlinien von Google gefunden, aber ich dachte, es gäbe einen Ansatz, der sich mit der Fläche und dem visuellen Schwerpunkt befasst.
Die aktuelle Anleitung von Google ist hier, scheint aber dies nicht mehr zu diskutieren: http://developer.android.com/design/style/iconography.html
Ich vermute, es hat für Android nicht funktioniert, aber als Anfänger-Designer schätze ich die Vorteile des visuellen Schwerpunkt-Ansatzes nicht vollständig. /shrug