Kostenlose SVG-Hintergründe und -Muster | SVG Backgrounds

• Bietet 48 leichte SVG-Hintergründe und -Muster, die Nutzer per Copy-and-Paste in Webprojekte einfügen können
• Jedes Design lässt sich bei Farbe, Größe, Blend Mode und mehr frei anpassen; einige unterstützen zudem Animationseffekte wie Drehen und Verschieben
• Alle Grafiken sind eigene Designs von SVGBackgrounds.com und können in privaten sowie kommerziellen Projekten verwendet werden
• Allerdings dürfen sie nicht in Konkurrenzprodukten enthalten sein, und eine Quellenangabe (Attribution) ist erforderlich
• Eine kostenlose Ressource, mit der Webdesigner und Entwickler markenspezifische Hintergründe einfach erstellen können

---

Überblick über kostenlose SVG-Hintergründe und -Muster

• SVGBackgrounds.com bietet ein Set kostenlos nutzbarer SVG-Hintergründe und -Muster
  • Nutzer können auf der Website Farben, Blend, Größe und mehr anpassen, um individuelle Hintergründe zu erstellen
  • Einige Designs enthalten visuelle Transformationsfunktionen wie Skalieren, Drehen und Verschieben
• Jeder Hintergrund ist ein originelles Design von SVGBackgrounds.com und kann direkt in Websites oder App-Interfaces eingesetzt werden
• Die bereitgestellten Grafiken können als CSS-Inline-Code, SVG und PNG heruntergeladen werden

Verwendung

• Nutzer können über eine Demo-Seite mit Hinweisen zur Einfügeposition des CSS-Codes nachvollziehen, wie die Integration funktioniert
• Die Hintergründe lassen sich per Copy-and-Paste einfach integrieren
• Die Website bietet verschiedene Anpassungsoptionen wie Farbpalette, Skalierung und Blend Mode

Lizenz und Nutzungsbedingungen

• Bei der Nutzung der Grafiken muss dem Lizenzvertrag von SVGBackgrounds.com zugestimmt werden
  • Nutzung in privaten und kommerziellen Projekten ist möglich
  • Einbindung in Konkurrenzprodukte oder Weiterverkauf ist nicht erlaubt
  • Bei kostenloser Nutzung ist eine Quellenangabe (Attribution) erforderlich
• Bezahlte Abonnenten erhalten Vorteile wie unbegrenzte Nutzung und Wegfall der Quellenangabe

Ersteller und Community

• Die Website wird von Matt betrieben und veröffentlicht jeden Monat neue kostenlose und kostenpflichtige Ressourcen
  • Nutzer können per E-Mail-Abo Benachrichtigungen zu neuen Hintergründen und Updates erhalten
• Der Ersteller schlägt verschiedene Formen der Nennung vor, darunter HTML-Link, Social Sharing und Unterstützung (Buy me a coffee)

Zusätzliche Ressourcen und Tools

• Neben Hintergründen bietet SVGBackgrounds.com auch verschiedene grafische Elemente wie SVG-Icons, Illustrationen, Buttons, Cursor und Shape Divider
• Mit Tools wie dem SVG to CSS Converter und dem Shape Divider Generator können Entwickler SVGs direkt umwandeln oder erzeugen
• Über aktuelle Releases und den Blog werden neue Design-Sets und Produkt-Updates fortlaufend veröffentlicht

[GN⁺]

Hacker-News-Kommentare

• Diese Hintergründe sind wirklich großartig. Ich wünschte mir nur statt eines „Klicken zum Kopieren“-Buttons ein <textarea> mit sichtbarem CSS
  Manche Browser oder Nutzer blockieren aus Sicherheitsgründen den Zugriff auf die Zwischenablage, daher gibt es keine Ausweichmöglichkeit, wenn die Kopierfunktion nicht funktioniert.

  • Guter Hinweis. Früher war es so, und es wäre wohl nicht schwer, wieder darauf zurückzugehen oder einen Button zum Anzeigen des Codes hinzuzufügen.

• Das orangefarbene Dachmuster gefällt mir besonders gut. In Firefox wird ein Teil davon aber nicht korrekt angezeigt — die blaue und die grüne Spirale werden jeweils nur als ein Rechteck bzw. ein Sechseck gerendert.
  Außerdem frage ich mich, wie man solche Hintergründe so einsetzt, dass sie den Inhalt nicht stören. Feine Muster wirken oft visuell ablenkend.

  • Üblich ist es, einen Hintergrund für das gesamte Dokument zu verwenden und darüber den eigentlichen Inhalt mit einem Overlay mit angepasster Opazität anzuzeigen. Auf einem großen PC-Vollbild wirkt das gut, auf Mobilgeräten ist aber oft zu wenig Platz, um den Hintergrund ausreichend zu zeigen.
  • Ich habe es in Firefox geprüft: Es funktioniert, aber der Effekt wird erst sichtbar, wenn man den oberen Slider bewegt. Ich überlege, die Richtung des Effekts umzukehren; das scheint besser zu sein.
  • Das Problem mit dem „blauen Rechteck und dem grünen Sechseck“ verschwindet, wenn man den Slider bewegt.

• Mir gefallen die Oberfläche zum Umschalten der Hintergründe und das Panel zur Parameteranpassung. Ich habe früher mit prozeduralen Mustern in SVG/canvas/webgl experimentiert, und das hier macht mir Lust, diese Darstellungsformen noch einmal neu zu verpacken.

  • Danke. Ich habe mehrfach UIs zur Grafikmanipulation entworfen, und diese Version habe ich besonders stark verfeinert. Weil ich den Hintergrund so groß wie möglich zeigen wollte, ergaben sich Einschränkungen, aber gerade dadurch wurden kreative Entscheidungen möglich. Mit dem Ergebnis bin ich ziemlich zufrieden.

• Die Meldung, dass man „Zugriff auf den Hintergrund hat“, nimmt auf dem Mobilbildschirm ein Drittel der Fläche ein und lässt sich nicht schließen. Ich frage mich, warum.

  • Es steht nur „Sie haben Zugriff. Viel Spaß!“, aber nachdem ich nachgesehen habe, scheint so ein Zugriff normalerweise etwa 120 Dollar pro Jahr wert zu sein.
  • Guter Punkt. Wenn man auf ein Thumbnail klickt, wird der Vorschau-Button durch die UI zur Hintergrundbearbeitung ersetzt, daher möchte ich diesen Teil noch einmal neu entwerfen.

• Es wirkt seltsam, dass beim Darüberfahren mit der Maus genau der Bereich, den ich ansehen möchte, unscharf wird oder verdeckt ist.

  • Der Grund für diese Entscheidung war, dass man mit einem Klick sofort die Gesamtansicht bekommt und es im Hover-Zustand nicht besonders viel zusätzliche Vorschau zu zeigen gibt. Der Hauptzweck des Hover-Zustands war, die Interaktionsmöglichkeit klarer zu machen.

• Es gibt nicht einmal etwas, das den <blink />-Effekt nachahmt. Ich verlange eine Rückerstattung. (scherzhafter Humor)

• Mit aktiviertem Dark-Reader-Plugin funktionieren die Vorschauen nicht.

• Das Dreiecksmuster gefällt mir besonders gut. Mich würde interessieren, ob es von Rule 30 inspiriert ist.

  • Von Rule 30 hatte ich vorher noch nie gehört. Zum Glück war der Link zu Wikipedia, und das Konzept war ziemlich interessant und eine inspirierende Idee. Danke fürs Teilen.

• Ich habe diese Seite vor etwa einem Jahr entdeckt, als ich mein Portfolio neu gebaut habe, und damals einen der Hintergründe im Header verwendet. Vielen Dank.

  • Freut mich, dass du es nützlich einsetzen konntest. Schön, wenn es geholfen hat.

• Wirklich tolle Hintergründe. Ich würde sie gern in meinem Solitaire-Spiel verwenden.
  Auf Mobilgeräten verschwindet das Bild allerdings nach der Vorschau beim Scrollen und erscheint erst nach einem Neuladen wieder. Außerdem wäre es schön, wenn jedes Muster einen Namen hätte.

  • Seltsam. Ich wäre dankbar, wenn du mir Geräte- oder Browserinformationen über das Kontaktformular schicken könntest. Zur Info: Jeder Hintergrund hat einen Namen, aber auf Mobilgeräten ist er wegen des knappen Platzes ausgeblendet.