Ein Artikel über Wohnungsrenovierung , über die effiziente Nutzung grafischer Ressourcen moderner Geräte. Von Smartwatches über Fernseher bis zur Wand.
Die Geschichte, wie man sich wiederholende Hintergrundbilder in die Seite einfügt, damit es allen gut geht.
Bist du bereit zu spielen? Dann fuhr
Einführungskurs
Es gab eine Aufgabe, eine Site-Seite mit einem sich wiederholenden Bild zu erstellen.
Wie werden wir uns entscheiden?
Level 1 Trite primitive
Die einfachste Methode, die eine große Anzahl von Setzern verwendet, besteht darin, das Hintergrundbild auf einmal zu erfassen (meistens das PNG-Format, da es in Figma und Avocode standardmäßig festgelegt ist) und es über ein Hintergrundbild in den Block zu verschieben.
(* Nun, du bist nicht so, mein junger Leser?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
Wenn der Entwickler etwas erfahrener ist und weiß, dass JPG in der Regel besser als PNG komprimiert ist, wird der Hintergrund im JPG-Format angezeigt.
Level 2 Leistung ist mir egal
Wenn dem Layouter die Leistung der entwickelten Seite nicht wichtig ist und er weiß, dass Sie an dieser Stelle den Benutzerverkehr erheblich reduzieren können, kann er das Muster (den sich wiederholenden Teil des Hintergrunds) von diesem Bild isolieren, wenn Sie Glück haben.
Wenn das Layout in PhotoShop implementiert wurde, müssen Sie es zuschneiden. Denn dort wird der Hintergrund durch ein untrennbares Element bestimmt.
Beispiel für die Aufnahme eines sich wiederholenden Hintergrunds aus Avocode
In Figma ist dies etwas einfacher zu implementieren. Dies hängt jedoch davon ab, wie der Designer diesen Hintergrund für Sie erstellt hat.
* Wer spielen will, dem lasse ich mein Beispiel zum Download.
Im Beispiel gibt es zwei Optionen mit png- und svg-Mustern, die später erläutert werden.
Ok, jetzt haben wir anstelle eines großen Hintergrundbildes ein sich wiederholendes Kachelelement (CSS-Kachelung).
body { background: url("bg.jpg"); }
Gut gemacht, gut gemacht. Anstelle von (586 kB) entnimmt der Benutzer jetzt alles vom Server (~ 24 kB). Profit!
Level 3 Ich werde dich auf das Maximum drücken
Lassen Sie uns überlegen, ob es möglich ist, die Situation irgendwie zu verbessern. Hmm, aber das Bild ist nicht kompliziert, vielleicht kannst du es in einen Vektor überholen?
Und dann versteckte sich der Dämon der Versuchung.
Um das Beste zu erreichen, verderben wir oft den guten William Shakespeare
Wenn dies nicht rational oder überhaupt nicht erfolgt:
- Sie haben ein komplexes Wiederholungsmuster. Es wird n Stunden dauern, um es neu zu zeichnen, und wenn Sie den Designer durch diese Aufgabe ebenfalls belasten, wird Ihr Karma definitiv abnehmen.
- Es gibt Schatten oder Elemente mit Unschärfe im Bild, und Sie stimmen nicht zu, sie abzulehnen.
* Hier ist es notwendig zu erklären
Wenn Sie SVG-Grafiken aus Figma oder Illustrator exportieren, diese jedoch nicht selbst im Editor codieren, werden die Elemente der Unschärfe oder des Schattens höchstwahrscheinlich im base64-Format in SVG eingefügt, was Ihre Leistung in keiner Weise verbessert, da eine solche Datei tatsächlich Kann mehr wiegen als das analoge JPG-Format.
Überprüfen Sie immer, was Ihnen angeboten wird. Natürlich können einige dieser Elemente auch mit Code unter Verwendung der Tags filter, use, object ... erstellt werden. Um mit ihnen arbeiten zu können, ist jedoch ein ausgeprägter Skill erforderlich, der selten vorkommt.
Ok, lass uns eine SVG erstellen und sehen, was passiert.
* Aus Gründen der Reinheit des Experiments wurden die gezeigten Bilder nicht von Drittanbieter-Dienstprogrammen komprimiert und mit PhotoShop, Illustrator und Avocode in 100% iger Qualität gespeichert.
Ok, unsere Svg ist weniger als JPG / PNG der Originalversion.
Dies ist nicht verwunderlich, da wir darin nur die Grundfarben belassen, die wir gesehen haben, und nicht die, die an der Verbindungsstelle von Objekten mit Unschärfe erscheinen.
Der Unterschied zwischen den Größen von PNG- / JPG-Dateien scheint nicht sehr bedeutend zu sein und spielt nur dann eine Rolle, wenn das Bild groß ist.
* Ich bevorzuge png und setze die Hintergrundfarbe auf die Eigenschaft background-color, aber das kommt von der Aufgabe.
Ich war ein wenig verwirrt darüber, dass das aus svg erstellte png / jpg kleiner als SVG war (sogar ohne Systemmüll (pattern-bg_cleared.svg) mit SVGO )
Aber dann wurde mir klar, dass, wenn ich die Hintergrundkachel für Handys oder Fernseher verkleinern / vergrößern wollte, neue Muster (pattern-bg_min) und SVG gleich bleiben müssen (15 kB - immer) und keine Unschärfe auftritt beobachtet
Dies ist ein erheblicher Vorteil, insbesondere wenn der Benutzer die Seite von einem teuren Telefon mit einer guten Auflösung aus betrachtet und der Layout-Designer alle Grafiken vor dem Erscheinen der Schakale zugunsten von Google Page Speed gestochen hat. Hier spart es =)
body { background-image: url(picture.svg); }
Es kommt mir ziemlich bekannt vor.
Ok, kompliziere. Angenommen, die Stile, die der Textkörper in kritisches CSS einbezieht, werden direkt in den Stilen gerendert. * Um die Seite nicht zu verunreinigen, verwende ich ein anderes Muster, ein kleineres.
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
Es gab viel CSS und es funktionierte nicht mehr
Jetzt ist es also notwendig, dies alles korrekt zu codieren. Das unverschlüsselte Einfügen von SVG wird nur von Webkit-Browsern unterstützt. Vielen Dank, Julia Bukhvalova, für eine nützliche Codierungsressource , die uns dabei helfen wird.
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Beispiele zur Veranschaulichung, wie SVG in CSS gepackt werden kann.
Der Cursor ist SVG
Alles scheint in Ordnung zu sein, aber ich bin sicher, dass ich dieses Muster auf allen Seiten meiner Website verwenden werde? Sicherlich muss es in kritisches CSS integriert werden, oder vielleicht ist es in dem üblichen Plug-in-CSS korrekter und hoffentlich wird es vom Browser zwischengespeichert? Vielleicht kann man es trotzdem nur für bestimmte Seiten verbinden? Jemand schlauer sagte, dass der in HTML platzierte Code vom Browser schneller gesammelt wird und eine höhere Priorität in Bezug auf die Wiedergabegeschwindigkeit hat. So viele Fragen ... du musst es versuchen.
Level 4 Ich werde alle Säfte aus dir herauspressen
Zuerst erstellen wir ein SVG-Element, das eine Höhe und Breite von 100% des Außengeräts hat, sodass es jeden Container belegt, in den wir es gestellt haben.
<svg width="100%" height="100%"> </svg>
Um ein Muster zu erstellen, müssen wir es in das Tag svg defs (definition) einfügen, zum Beispiel so:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
Schon gar nicht schlecht, dann müssen Sie Attribute hinzufügen, mit deren Hilfe wir mit dem Muster interagieren und es irgendwie aufrufen können.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
Wir werden ihm einen Bezeichner geben, damit er später referenziert werden kann, wir werden auch die Startkoordinaten der X- und Y-Referenz angeben, deren Breite und Höhe wir im Grafikeditor einstellen, den Umfang der ViewBox festlegen (Sie können ihn aus dem fertigen SVG entnehmen).
Ein wenig aus dem Thema, über ViewBoxDas Beispiel der Visualisierung der Skalierung und der Koordinaten von ViewBox SVG von Amelia Wattenberger hat mir sehr gut gefallen.
Https://wattenberger.com/guide/scaling-svg ... und setzen Sie das Attribut patternUnits auf userSpaceOnUse (dies definiert ein Koordinatensystem, über das Sie in MDN mehr erfahren können )
Kurz gesagt, mit patternUnits = "userSpaceOnUse" wird die Form auf der SVG-Zeichenfläche vollständig mit Musterkacheln gefüllt. Wenn die letzte Kachel nicht vollständig in die Länge oder Breite passt, wird sie zugeschnitten.
Nun müssen wir uns für das Bild entscheiden, das wiederholt werden soll
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
Alles ist fast fertig, es bleibt unser Muster auf ein bestimmtes Objekt abzurufen, also zum Beispiel einen rechteckigen Bereich zum Ausfüllen zu erstellen.
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
Sie können sehen, dass das Füllattribut (das normalerweise die Füllfarbe enthält) auf eine URL verweist, die den Bezeichner unseres neu definierten Musters enthält: fill = "url (# pattern-bg)".
Unser sich wiederholendes Muster nimmt den gesamten Platz in der Breite ein, aber ich möchte auch, dass in der Höhe alles Platz einnimmt. Um dies zu tun, wickeln Sie unsere Svg mit einer Höhe von Höhe: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
jetzt ist es gut Natürlich sollten Sie im Tag versuchen, Ihre ernsthafteren Bilder einzufügen, aber ich habe Sie in die richtige Richtung gelenkt.
Mit dieser Einfügemethode können Sie im Gegensatz zur Methode im Hintergrund die Details von SVG-Elementen steuern. Es gibt eine gewisse Freiheit, was dem Benutzer gegeben werden soll und was nicht. Und wenn Sie experimentieren und ein wenig JS hinzufügen möchten, können Sie auch Morphing (Formwechsel) erzielen.
Bei den Problemen dieser Methode zum Einfügen einer sich wiederholenden Kachel stellte ich fest, dass es keine Möglichkeit gibt (nun, oder ich konnte es nicht finden, und diejenigen, die es wissen, werden in den Kommentaren schreiben), die Größe der Kachel zu ändern, wenn die Browser-Bildschirmgröße geändert wird. Tatsächlich sind die Breite / Höhe-Attribute des Pattern-Tags dafür verantwortlich, aber ich konnte sie nicht über CSS und Medien erreichen. Nun, es gibt immer JS, wenn Sie es wirklich brauchen
Cheats Ich kenne die Grafik nicht, aber ich möchte die schöne anfassen
Wenn Sie aus irgendeinem Grund nicht wissen, wie ein sich wiederholendes Element eines Musters in einem grafischen Editor gezeichnet wird, oder wenn Sie keine Zeit dafür haben. Hier finden Sie Websites mit vorgefertigten Lösungen, auf denen gute Menschen gute Dinge mit der Welt teilen.
* eine kleine Ergänzung (wo ist es heutzutage ohne Porno)
https://svgporn.com/
Team Support Was ist los mit dem Support?
Am Anfang des Artikels schrieb ich, dass es allen gut gehen wird, ich gebe zu, es war ein Scherz.
IE- Benutzer Ihrer Bemühungen werden die Unterstützung dieses Tags für IE nicht sehen und nicht kommen, und werden nicht kommen, aber ansonsten ist mit SVG alles nicht so schlimm, auch bis zu 9 IE caniuse.com
Ich würde auch empfehlen, die fertige Arbeit in Firefox zu überprüfen, manchmal gibt es Vorfälle.
Wenn die Fans die Dokumentation lesen möchten, hinterlassen Sie auch ein paar Links
https://developer.mozilla.org/en/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/en/docs/Web/SVG/Tutorial/PatternsFür diejenigen, die bis zum Ende durchblättern, lasse ich mein Beispiel, wie man Spaß mit der eingebauten SVG hat, am Anfang des Artikels
Machen wir das Web besser.PS Besonderer Dank geht an Alexandr_TT und seine Website https://svg-art.ru/ für die Werbung für SVG im riesigen russischsprachigen Internet