6 générateurs de modèles SVG intelligents pour votre prochaine conception UX

Les modèles SVG pourraient facilement être considérés comme une superpuissance sous-estimée du SVG. Bien qu’ils ne soient souvent pas bien compris, les modèles SVG offrent de nombreuses options de conception intéressantes une fois que vous avez compris leurs subtilités.

Dans cet article, nous allons commencer par un cours accéléré sur le fonctionnement des modèles SVG. Ensuite, nous passerons en revue 6 outils qui en tirent parti.

En théorie, combiner la sortie de ces outils avec ce que vous savez sur les modèles devrait ouvrir de nouvelles possibilités de conception passionnantes.

Comment fonctionnent les modèles SVG ?

Les motifs répétitifs ont été un pilier de la conception Web depuis les premiers jours de Geocities et MySpace ont régné sur l’Internet préhistorique. Même si vous ne connaissez qu’un peu le CSS, vous comprenez probablement à quel point il est facile de configurer n’importe quelle image en tant qu’arrière-plan de mosaïque CSS.

div {
    background-image: url("sitepoint-tile.svg");
  }

Bien sûr, nous pourrions utiliser n’importe quel format d’image Web que nous aimons pour cet arrière-plan (JPG, PNG, etc.). Mais comme les SVG sont si efficaces, pointus et évolutifs, il existe d’excellentes raisons de choisir d’utiliser un SVG pour vos tuiles d’arrière-plan CSS.

Cependant, vous êtes peut-être moins familier avec la méthode native de SVG pour créer des arrière-plans répétitifs – Motifs SVG. Il est pertinent pour nous car il offre des pouvoirs spéciaux que le carrelage CSS normal ne peut pas. Mais d’abord, regardons comment fonctionne un modèle SVG simple.

<svg>
  <defs>
  <pattern id="myPattern"
           x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >

      <circle cx="10" cy="10" r="7" style="stroke: none; fill: magenta" />

  </pattern>
</defs>
...

En haut de la plupart des fichiers SVG, vous trouverez un <DEFS> bloc de code. Cette <DEFS> section (ou DÉFinitions) est l’endroit où nous plaçons les éléments que nous voulons réutiliser plus tard. Concrètement, cela signifie SVG FILTRES, SYMBOLES et Motifs.

Motifs SVG simples

Le balisage de modèle SVG

A l’intérieur de notre <DEFS> bloc, nous avons mis en place une zone de motif de 20 x 20 pixels. Ensuite, nous avons positionné un petit cercle magenta en plein centre (cx = « 10 » cy = « 10 ») de cet espace (bien que cela aurait pu être n’importe quel élément que nous voulions carreler).

Mais cela ne s’affiche nulle part – pour le moment. C’est juste un modèle définition – presque comme un échantillon de couleur ou une classe CSS. Vous devrez le référencer dans l’un de vos FILL SVG pour le voir s’afficher.

...
<circle cx="50" cy="50" r="50" style="stroke: #ccc; fill: url(#myPattern);" />
</svg>

Ici, nous créons un grand cercle (rayon 50px) et le remplissons en faisant référence au motif que nous avons défini ci-dessus. Il rend comme ça.

Voir le stylo
Motif SVG simple par Alex (@alexmwalker)
sur CodePen.

C’est relativement simple, non ? Nous pourrions agrandir ce cercle de conteneurs aussi grand que nous le souhaitions sans augmenter la taille du fichier.

Alors, les modèles SVG sont-ils plus utiles que les mosaïques d’arrière-plan CSS ?

Ils ont certainement boîte être.

SVG vous permet de référencer un motif à partir d’un deuxième motif

Cela vous permet de créer des motifs complexes en couches à partir de composants très simples. Par exemple, comment produirez-vous ce motif moiré avec une tuile CSS standard ?

SVG nous permet de définir un « motif de base » – comme les points que nous avons créés ci-dessus – puis de superposer ce même motif avec différents remplissages de couleurs, rotations et échelles (comme l’exemple ci-dessus). Fichiers minuscules mais complexités folles.

Je pense que cette caractéristique spéciale ouvre de nombreuses nouvelles possibilités de conception – une fois que vous avez une idée des bases.

Éditeurs de motifs et de vecteurs SVG

Les modèles SVG sont très bien pris en charge dans tous les navigateurs modernes, mais sont PAS TOUJOURS pris en charge dans vos éditeurs vectoriels préférés. À ma connaissance:

• Adobe Illustrator: Illustrator dispose d’excellents outils de création de motifs et a bien exporté les modèles SVG pendant une décennie. Je n’ai pas essayé d’importer des modèles existants, mais je soupçonne que les résultats pourraient être inégaux.
• Figma: Figma ignore actuellement les motifs de tout SVG importé. À mon humble avis, c’est le plus grand oubli de Figma.
• Inkscape: Inkscape importe et exporte magnifiquement les motifs SVG. je recommanderais optimiser votre SVG final pourtant.
• Esquisser: Je ne suis pas un utilisateur de Sketch, mais mes recherches semblaient indiquer qu’il ne supportait pas les modèles SVG (je suis heureux d’être corrigé cependant).
• SVG carré: Excellentes installations d’importation et d’exportation de modèles. Pour moi, les capacités de Boxy à gérer les modèles valent à elles seules le prix d’achat.

Cela ne devrait pas être un facteur décisif, mais soyez simplement conscient lors de la sélection de vos outils.

Générateurs de motifs SVG

Pour l’instant, examinons quelques options de modèle SVG prêtes à l’emploi disponibles. Prenez-les tels quels ou utilisez-les comme point de départ pour des créations plus intéressantes.

Tout d’abord, je dois aborder «l’éléphant dans la pièce (ou l’application Web dans ce cas)».

Je ne sais vraiment pas comment prononcer le nom de cette sélection. Est-ce ‘dix-mille-quinze-points-io‘? Je soupçonne qu’ils riffent sur une orthographe en L33t de ‘OUTILS.io‘. Cependant, pour moi, cela à peine se lit comme des « outils » même lorsqu’il est associé à leur police de logo géométrique idéale.

Pouvez-vous remplacer un ‘1’ par un ‘T’ et un ‘L’ dans le même mot ? Personnellement, je dirais que non. Peut-être que c’est juste moi ?

Passons aux points positifs…

La ‘Générateur de motifs SVG‘ lui-même fait partie d’une suite impressionnante de 50 outils en ligne gratuits proposés. Les éléments de modèle SVG qu’il génère ne sont pas extrêmement créatifs. Vous pouvez personnaliser la forme répétitive, la palette de couleurs, l’échelle, l’opacité, la rotation et l’inclinaison. Ce qui est bien avec cet outil est :

1. l’interface utilisateur est rapide et facile à apprendre

2. il génère des modèles SVG authentiques et prêts à l’emploi (plutôt que des dalles génériques d’image SVG comme de nombreux autres outils)

Cela fait de ce générateur un bac à sable « pointer-cliquer » pratique pour apprendre comment fonctionnent les modèles SVG. Modifier un paramètre. Regardez le code. Répéter.

Pendant que vous y êtes, découvrez leur Générateur de blob SVG, Générateur de Glassmorphisme CSSet Outil de recherche de paires de polices Google.

N’oubliez pas de le mettre en signet – c’est une URL difficile à retenir 😉 .

Modèles de hérosun projet du concepteur et illustrateur d’interface utilisateur Steve Schoger, reste une bonne ressource.

Steve propose plus de 90 modèles SVG en téléchargement gratuit et vous permet de définir l’opacité, les couleurs de premier plan et d’arrière-plan de votre fichier.

Fait intéressant, les échantillons ici ne sont pas seulement un tas de tuiles carrées, ce qui en fait un bon endroit pour comprendre ce que vous pouvez faire avec les modèles SVG.

Dans de nombreuses cartes et graphiques du début du XXe siècle, les concepteurs ont souvent compensé le manque d’impression couleur en utilisant des motifs de remplissage monotones avec des points, des lignes et des hachages croisés. Bien qu’il s’agissait d’une limitation de conception de l’époque, il présente toujours une option nette et super efficace pour vos remplissages SVG aujourd’hui.

Iros a rassemblé un livre de modèles de motifs de remplissage monotones que vous pouvez facilement référencer dans votre travail. Ce sont de petits fichiers et vous pouvez probablement vous permettre de tous les inclure, même si vous n’en référencez que quelques-uns.

UN monstrueusement grande collection de graphiques SVG élégamment carrelés – environ 250 à mon avis. Il est facile de redimensionner, colorer, faire pivoter et repositionner rapidement chaque motif.

Pattern Monster vous permet d’exporter votre tuile en tant que code SVG prêt pour CSS, vous devrez donc coder vos propres définitions de motifs SVG pour les utiliser dans une image SVG.

Sébastien Noël a une collection à couper le souffle d’outils de conception simples, originaux et beaux disponibles à son fffuel.co placer.

De ce groupe, son Générateur de motifs 3d isométrique mmmotif est le meilleur ajustement pour cette liste. Comme Pattern Monster, vous pouvez mélanger et assortir des formes, des couleurs, des mises à l’échelle et des angles pour composer une tuile isométrique 3D bosselée.

Matt Lipman m’a indiqué son générateur SVG – SVGBackgrounds.com. Cet outil propose actuellement 30 motifs de base, mais les couleurs et l’opacité peuvent être personnalisées en quelques clics. Lorsque vous avez terminé, il exporte du SVG compatible CSS qui peut être collé dans votre feuille de style. Comme c’était le cas avec Pattern Monster, vous devrez coder manuellement les définitions de motifs SVG.

Une poignée de mentions honorables…

• Shapes4Free: Une belle collection de motifs vectoriels, bien qu’ils ne soient actuellement présentés que comme des morceaux de SVG – pas techniquement comme du code de motif SVG.
• Galerie de motifs SVG: Une petite collection de motifs SVG basée sur Les patrons CSS3 de Léa Verou. N’a pas eu d’ajouts depuis un bon moment, mais cela en vaut toujours la peine.
• ppixelate: Un autre outil Seb. Habituellement, nous choisissons SVG pour éviter la pixellisation. Cet outil s’en délecte, vous permettant de dessiner des tuiles pixel art au format SVG.
• géomodèles: Il s’agit d’une expérience intéressante de ‘génération de modèles procéduraux’. Tout ce que vous tapez dans le champ de texte est utilisé comme « graine » pour générer un nouveau motif unique. Une curieuse curiosité.
• Générateur de triangulation: Cet outil génère un type très spécifique de SVG d’arrière-plan – une matrice triangulaire colorée à facettes – presque comme une surface 3D à faible polygone. Vous pouvez contrôler la couleur, la taille et le caractère aléatoire de la grille sous-jacente.

Emballer

Les grands modèles SVG sont un mélange parfait d’inspiration de conception et de savoir-faire technique, et avoir de bons outils pour vous aider est certainement utile.

Si vous souhaitez expérimenter des modèles SVG, j’ai écrit un article sur utiliser Boxy SVG pour créer des motifs SVG à partir de zéro. Expérimenter avec cet outil m’a appris beaucoup de ce que je sais maintenant sur les modèles.