Arrière-plans et motifs SVG gratuits | SVG Backgrounds

• Propose 48 arrière-plans et motifs SVG légers, applicables à des projets web par simple copier-coller
• Chaque design permet de modifier librement les couleurs, la taille, le mode de fusion et, pour certains, prend en charge des effets d’animation comme la rotation et le déplacement
• Tous les graphiques sont des créations originales de SVGBackgrounds.com, utilisables dans des projets personnels et commerciaux
• En revanche, ils ne peuvent pas être inclus dans des produits concurrents et une attribution est obligatoire
• Une ressource gratuite qui permet aux web designers et aux développeurs de créer facilement des arrière-plans adaptés à leur marque

---

Présentation des arrière-plans et motifs SVG gratuits

• SVGBackgrounds.com propose un ensemble d’arrière-plans et de motifs SVG utilisables gratuitement
  • Les utilisateurs peuvent créer des arrière-plans personnalisés directement sur le site en ajustant les couleurs, le mode de fusion, la taille, etc.
  • Certains designs incluent des fonctions de transformation visuelle comme le redimensionnement, la rotation et le déplacement
• Chaque arrière-plan est une création originale de SVGBackgrounds.com, directement exploitable dans un site web ou une interface d’application
• Les graphiques fournis peuvent être téléchargés aux formats code CSS inline, SVG et PNG

Mode d’utilisation

• Les utilisateurs peuvent consulter la méthode d’intégration via une page de démonstration indiquant où insérer le code CSS
• Les arrière-plans peuvent être intégrés facilement par copier-coller (Copy and Paste)
• Le site propose diverses options de réglage comme la palette de couleurs, l’échelle et le mode de fusion

Licence et conditions d’utilisation

• L’utilisation des graphiques implique l’acceptation du contrat de licence de SVGBackgrounds.com
  • Utilisation autorisée pour les projets personnels comme commerciaux
  • Interdiction de les inclure dans des produits concurrents ou de les revendre
  • En utilisation gratuite, l’attribution est obligatoire
• Les abonnés payants peuvent bénéficier d’un usage illimité et d’une dispense d’attribution

Créateur et communauté

• Le site est géré par Matt, qui publie chaque mois de nouvelles ressources gratuites et payantes
  • Les utilisateurs peuvent recevoir les derniers arrière-plans et les notifications de mise à jour en s’abonnant par e-mail
• Le créateur propose plusieurs formes de crédit, notamment un lien HTML, le partage sur les réseaux sociaux ou un soutien via Buy me a coffee

Ressources et outils supplémentaires

• En plus des arrière-plans, SVGBackgrounds.com propose divers éléments graphiques comme des icônes SVG, illustrations, boutons, curseurs et shape dividers
• Des outils comme le convertisseur SVG to CSS et le Shape Divider Generator permettent aux développeurs de convertir ou de générer directement des SVG
• Les dernières releases et le blog permettent de publier en continu de nouveaux ensembles de designs et des mises à jour produit

[GN⁺]

Avis Hacker News

• Ces arrière-plans sont vraiment superbes. En revanche, j’aimerais qu’il y ait un <textarea> affichant le CSS au lieu d’un bouton « cliquer pour copier »
  Certains navigateurs ou certains utilisateurs bloquent l’accès au presse-papiers pour des raisons de sécurité, donc il n’y a aucun moyen de secours quand la copie ne fonctionne pas

  • Bonne remarque. C’était comme ça avant, et ça ne devrait pas être difficile de revenir à ce fonctionnement ou d’ajouter un bouton d’affichage du code

• J’aime particulièrement le motif de toit orange. Mais dans Firefox, certaines parties ne s’affichent pas correctement — les tourbillons bleus et verts sont chacun rendus comme un simple carré et un hexagone
  Je me demande aussi comment utiliser ce genre d’arrière-plans sans qu’ils gênent le contenu. Les motifs détaillés finissent souvent par distraire visuellement

  • En général, on met l’arrière-plan sur toute la page, puis on affiche le corps du texte par-dessus avec un overlay à opacité ajustée. Ça fonctionne bien sur un PC en plein écran, mais sur mobile l’espace manque et il est difficile de montrer suffisamment l’arrière-plan
  • Je viens de vérifier dans Firefox et ça fonctionne, mais il faut déplacer le slider du haut pour que l’effet apparaisse. J’envisage de retravailler ça, car il vaudrait peut-être mieux inverser le sens de l’effet
  • Le problème du « carré bleu et de l’hexagone vert » se règle quand on déplace le slider

• J’aime bien l’interface de changement d’arrière-plan et le panneau d’ajustement des paramètres. J’avais expérimenté il y a quelque temps des motifs procéduraux en SVG/canvas/webgl, et ça me donne envie de repackager à nouveau cette manière d’exprimer les choses

  • Merci. Après avoir conçu plusieurs fois des interfaces pour manipuler des graphismes, j’ai particulièrement peaufiné cette version. Le fait d’essayer de montrer l’arrière-plan le plus largement possible a créé des contraintes, mais cela a aussi permis des choix créatifs. Je suis assez satisfait du résultat

• L’avertissement disant qu’on a accès à l’arrière-plan prend un tiers de l’écran sur mobile et il n’y a aucun moyen de le fermer. Je me demande pourquoi

  • Ça affiche simplement « Vous avez accès. Profitez-en ! », mais d’après ce que j’ai pu voir, ce type d’accès vaut généralement environ 120 $ par an
  • Bonne remarque. Comme un clic sur la miniature remplace le bouton d’aperçu par l’interface de manipulation de l’arrière-plan, je pense retravailler cette partie

• Je trouve étrange que, quand on survole avec la souris, la partie que je veux voir soit floutée ou masquée

  • Si c’est parti dans cette direction, c’est parce qu’un seul clic permet d’afficher la vue complète, et qu’en état hover il n’y avait pas grand-chose de plus à montrer en aperçu. Le but principal du hover était de rendre la possibilité d’interaction plus évidente

• Il n’y a rien qui imite l’effet <blink />. Je demande un remboursement (humour)

• Avec le plugin Dark Reader activé, l’aperçu ne fonctionne pas

• J’aime particulièrement le motif triangulaire. Je me demande s’il est inspiré de Rule 30

  • Je n’avais jamais entendu parler de Rule 30. Heureusement que le lien menait vers Wikipedia, et le concept m’a paru assez intéressant et source d’inspiration. Merci de l’avoir partagé

• J’ai découvert ce site il y a environ un an, quand j’ai refait mon portfolio, et j’avais utilisé l’un des arrière-plans pour l’en-tête. Merci beaucoup

  • Ravi d’apprendre que ça t’a été utile. Tant mieux si ça a pu aider

• Ces arrière-plans sont vraiment superbes. J’aimerais les utiliser dans mon jeu de solitaire
  En revanche, sur mobile, si on fait défiler après l’aperçu, l’image disparaît et il faut recharger la page pour la revoir. Et ce serait bien si chaque motif avait un nom

  • C’est étrange. Je serais reconnaissant si vous pouviez envoyer les informations sur l’appareil ou le navigateur via le formulaire de contact. À noter que chaque arrière-plan a bien un nom, mais sur mobile ils sont masqués faute de place à l’écran