Symboles SVG «Reskinnable»: comment les faire (..et pourquoi)

Les icônes

SVG sont de plus en plus utilisées dans la conception Web moderne, grâce à leur évolutivité, leur petite taille de fichiers et leurs capacités de style CSS, ce qui les rend idéales pour les sites Web réactifs.

Bien que SVG puisse être stylé à l'aide de CSS, cela ne fonctionne que si le code SVG est intégré dans la page HTML. Cela signifie qu'une seule partie du SVG ne peut être modifiée que si le SVG est intégré.

Cet article présente le concept de "symboles SVG amovibles", où le "squelette" de l'image SVG reste inchangé, mais l'apparence de surface peut être facilement modifiée.

L'article propose une solution au problème de ne pas pouvoir modifier une seule partie de SVG. Cela implique la création d'un symbole pour chaque forme du SVG, chaque symbole de la même boîte de vue, permettant des styles pour chaque élément selon les besoins.

L'auteur détaille le flux de travail de la construction de symboles SVG à l'aide d'Adobe Illustrator et Gulp, et note que cette méthode est compatible avec tous les navigateurs modernes.

L'utilisation généralisée de SVG dans les pages Web modernes a été considérablement améliorée en 2016, grâce à la taille de son fichier, de l'évolutivité et des capacités de style CSS.

Il peut être utilisé dans le système d'icônes (voir la construction de vos propres icônes SVG), bien que les polices d'icônes puissent être préférables dans certains cas (voir Icon Wars: Fonts and SVG).

Mais SVG peut également être utilisé pour les éléments logo ou graphiques (du moins pas des éléments trop complexes), et sa flexibilité naturelle en fait la solution parfaite pour les sites Web réactifs (voir Sara Soueidan "Faire un SVG réactif avec CSS").

L'utilisation de SVG peut tirer parti des CSS pour localiser et modifier la taille et la couleur d'un élément entier, cependant, il n'est pas possible de modifier ses parties individuelles de cette manière à moins que votre code SVG ne soit intégré dans une page HTML.

Question

Regardons un exemple plus simple. Voici une image que nous devons afficher en plusieurs couleurs.

Traditionnellement, nous créons trois images distinctes - chacune avec un "style" différent. Mais que se passe-t-il si nous voulons utiliser un seul fichier SVG et le coiffer lors du rendu?

Aussi, existe-t-il un moyen de faire de nos images des "symboles SVG" pour profiter du cache du navigateur?

Je l'appelle le "symbole SVG skinable" - le "squelette" de l'image SVG reste le même, mais l'apparence de surface est facilement modifiée.

La solution idéale consiste à accéder à l'élément symbolique via le sélecteur CSS et à y ajouter des règles (même méthode utilisée par SVG embarqué).

Dans l'exemple ci-dessous, j'ai ajouté une classe (en haut, à droite, en bas et à gauche) à chaque triangle, organisé l'image en tant que symboles et essayé de le modifier via CSS, comme suit:

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Malheureusement, pour le moment, cela ne fonctionne que pour Firefox, comme le montre la démonstration de codepen ci-dessous. Ce n'est que sur Firefox que la deuxième image apparaîtra dans une teinte bleue (j'intègre le code symbolique dans le stylo pour plus de commodité, mais l'utilisation d'un fichier SVG externe obtiendra le même résultat).

lien de codepen 1

lien de codepen 2

Dans les grands projets, nous pouvons avoir de nombreux éléments de ce type, et les problèmes de maintenance sont un facteur important, donc je suis toujours à la recherche d'un moyen de mieux organiser les ressources du projet.

Mon objectif est une solution CSS pure: l'exemple précédent pourrait être réécrit à l'aide d'un seul triangle SVG, qui peut être tourné, déplacé et ombré via CSS.

Mais je n'aime pas cette solution: il me semble que cela change simplement le problème et ne résout pas le problème. Combien de composants de logo du monde réel ont la même forme?

Sara Soueidan explique ce problème mieux que moi et nous fournit une solution intelligente à l'utilisation de variables CSS. Malheureusement, les variables CSS sont toujours une technique expérimentale et les navigateurs Microsoft ne les soutiennent pas.

Solution

Comme cela arrive souvent, la solution est si simple que vous vous sentirez stupide parce que vous ne vous y attendez pas auparavant.

Je l'ai découvert il y a quelques mois quand j'ai vu le nouveau logo Medium (il semble que Medium ait changé leur code de logo - vous devez me croire).

Vous pouvez voir que le logo moyen se compose de quatre "formes", chacune remplie d'une couleur unie différente. La version en noir et blanc est la même que la version verte (à l'exception de la couleur bien sûr).

La solution à la possession des deux versions d'un seul fichier est simplement de créer un symbole pour chaque forme, chaque symbole dans le même Viewbox .

Appliquons-le à notre exemple et créons un symbole pour chaque forme de l'image. Ils partagent tous la même Viewbox (0 0 54 54) de l'image entière, ils sont donc positionnés dans la bonne position sans aucune instruction supplémentaire. Veillez simplement à éviter d'utiliser le remplissage, la course, le style et d'autres attributs dans le code de symbole).

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

Maintenant, nous pouvons les combiner en un seul conteneur SVG:

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Chaque élément d'utilisation peut être stylé au besoin, et surtout, il est compatible avec tous les navigateurs modernes:

lien de codepen 3

c'est tout.

Nous avons juste besoin d'organiser nos fichiers SVG comme celui-ci. Bien sûr, nous pouvons le faire manuellement, mais si vous devez gérer de nombreux éléments graphiques, ou si vous devez les éditer et les réutiliser rapidement dans plus de projets, vous avez besoin d'un flux de travail plus intelligent et plus rapide. J'ai trouvé une solution utilisant Adobe Illustrator et un peu de gorgée.

Svg Symbol Construction Workflow

Le principe de cette technique est le même que j'ai introduit dans les articles "Créez vos propres icônes SVG" et "Créer des polices d'icônes avec illustrator et icomoon", alors vérifiez-les pour la première étape.

Supposons que nous ayons deux éléments, tout comme l'image ci-dessous. Chaque élément est disposé dans un tableau artistique spécifique:

Pour plus de commodité, nous leur avons ajouté quelques couleurs, bien que nous sachions que la couleur de remplissage (et le cas échéant, la couleur de course, la taille de course, etc.) sera modifiée via CSS.

Étant donné que chaque symbole doit avoir son artboard, nous devons maintenant segmenter chaque image en autant de planches artistiques que chaque partie colorée.

Cela peut être fait très rapidement dans Illustrator, coupant chaque élément, sélectionnant le Target Artboard et sélectionnant la commande Paste In Place.

Notez que chaque artboard a un nom spécifique: il sera utilisé pour l'ID symbolique.

Maintenant, nous pouvons exporter notre artboard en tant que SVG en utilisant le tout nouveau "Fichier → Exporter → Exporter en tant qu'écran" Commande.

Il s'agit d'un nouvel outil vraiment utile pour la dernière version de l'illustrator: il vous permet d'enregistrer chaque bétail art ou une ressource définie par l'utilisateur dans plusieurs formats à l'aide d'une seule commande.

Sélectionnez "Artboard" dans le panneau d'exportation, définissez "SVG" au format de sortie et sélectionnez le dossier cible:

Chaque art est exporté comme un seul fichier SVG:

Maintenant, nous devons combiner tous les fichiers en symboles SVG et supprimer certaines propriétés SVG indésirables: un petit script Gulp nous aidera à le faire rapidement.

en utilisant Gulp

La section suivante est un peu technique, mais - si vous préférez - cela vous donnera un moyen rapide et concis de générer un SVG aussi polyvalent.

J'ai écrit sur Gulp sur SitePoint, et vous pouvez également trouver beaucoup de ressources en ligne sur l'installation de Gulp et tous les paramètres connexes, donc je suppose que vous l'avez installé et vous savez de quoi nous parlons.

Quoi qu'il en soit, si vous n'aimez pas Gulp, vous pouvez également effectuer manuellement toutes les étapes suivantes. Je l'ai fait plusieurs fois avant de commencer à utiliser Gulp: c'est certainement un excellent moyen d'apprendre, et c'est suffisant sur de petits projets ou des endroits où il n'y a pas besoin d'édition et d'entretien continu.

Donc, nous avons des fichiers SVG, chacun disposé comme l'exemple ci-dessous (l'attribut D a été raccourci pour plus de commodité):

.top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */

Notre objectif est d'organiser toutes les images en symboles SVG dans un seul fichier tout en supprimant toutes les propriétés indésirables:

<svg xmlns="https://www.w3.org/2000/svg">
    <symbol id="top" viewBox="0 0 54 54">
        <polygon points="54 0 0 0 27 27 54 0"></polygon>
    </symbol>
    <symbol id="right" viewBox="0 0 54 54">
        <polygon points="54 54 54 0 27 27 54 54"></polygon>
    </symbol>
    <symbol id="bottom" viewBox="0 0 54 54">
        <polygon points="0 54 54 54 27 27 0 54"></polygon>
    </symbol>
    <symbol id="left" viewBox="0 0 54 54">
        <polygon points="0 0 0 54 27 27 0 0"></polygon>
    </symbol>
</svg>

Autre que Gulp, notre travail nécessite d'autres extensions:

• Tout d'abord, Gulp-Svgstore et Gulp-Svgmin sont utilisés pour combiner et compresser nos fichiers SVG
• Gulp-rename est utilisé pour ajuster le nom de l'ID et spécifier un nom pour notre fichier cible. Ce module est particulièrement nécessaire si vous souhaitez utiliser la commande d'illustrator SVG illustratrice précédente, que nous couvrirons plus tard.

Maintenant, nous pouvons organiser notre gulpfile (le code peut également être obtenu en tant que Gist public):

<svg>
    <use class="top" xlink:href="#top"></use>
    <use class="right" xlink:href="#right"></use>
    <use class="bottom" xlink:href="#bottom"></use>
    <use class="left" xlink:href="#left"></use>
</svg>

Après avoir chargé le module, nous demandons au fichier d'analyser (svg_files / *. Svg).

SVGSTORE utilise le nom de chaque fichier pour définir l'attribut ID de symbole (c'est-à-dire qu'un fichier nommé umbrella.svg deviendra un symbole avec id="umbrella"). Si vous utilisez la nouvelle exportation illustratrice comme panneau d'écran, vous pouvez éviter la première commande Renommer , car vos fichiers seront nommés exactement les mêmes que le tableau artistique auquel ils appartiennent.

Mais l'ancienne version d'Iltative crée un nom de fichier en connectant le nom du fichier illustrator avec le nom de Board, nous devons donc renommer le fichier pour supprimer le préfixe de nom de fichier illustrateur:

<svg id="Layer_1" data-name="Layer 1" xmlns="https://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<title>umbrella-handle</title>
<path d="..." fill="#603813"></path>
</svg>

Maintenant, nous pouvons nettoyer nos fichiers. Gulp-Svgmin est une version Gulp de SVGO, "un outil basé sur NodeJS pour optimiser les fichiers graphiques vectoriels SVG" (Jake Archibald a publié une version en ligne de SVGO, ce qui est très utile si vous souhaitez organiser des fichiers manuellement).

SVGO a beaucoup d'options configurables (vous pouvez les parcourir toutes dans la page du projet), mais nous n'en avons besoin que quelques-uns (bien sûr, vous pouvez personnaliser les scripts comme vous le souhaitez):

• Cleanupides: supprimez tous les ID du fichier
• supprimer lectype, les supprimer et les éléments de suppression: supprimer toutes les déclarations de type de documents, commentaires et <style></style> éléments
• supprimé: Si Viewbox existe, toutes les propriétés de largeur et de hauteur sont supprimées
• CleanupNumericValues: Termier la valeur à un niveau de précision raisonnable
• RemoveAttrs: supprimez tous les attributs spécifiés

Ensuite, passez le fichier au SVGSTORE pour combiner dans un fichier unique, puis renommer et enregistrer.

Après l'avoir utilisé plusieurs fois, vous devriez pouvoir le planifier pour chaque projet en quelques minutes, et cela vous permettra de reconstruire rapidement votre fichier de symbole SVG si vous en avez besoin.

Voici un exemple de résultat (même dans ce stylo, j'ai intégré le fichier SVG pour plus de commodité, mais vous pouvez le relier en toute sécurité en tant que fichier externe):

lien de codepen 4

y a-t-il un avertissement?

Étant donné que cette méthode est basée sur des éléments d'utilisation stylisés, nous avons des problèmes lorsque les polyfills (comme SVG4Everybody) les suppriment.

dans les navigateurs qui ne prennent pas en charge les liens symboliques externes (tous IE), svg4everybody remplace tous les éléments d'utilisation par le contenu du symbole correspondant. Par conséquent, toutes les règles CSS appliquées à l'utilisation ne prendront pas effet.

Cela peut être résolu en ajustant le sélecteur CSS pour s'adapter aux éléments symboliques internes (chemin, cercle, etc.), mais cela peut être un peu délicat.

BONUS OUT

Il existe des variations illimitées de ce workflow: vous pouvez gérer les coups, le texte, etc.

Une autre fonctionnalité intéressante qui mérite d'être explorée est l'utilisation de symboles illustrateur: ils sont exportés sous forme de symboles SVG, qui apporte de nombreuses possibilités.

Merci d'avoir lu.

Des questions fréquemment posées sur les symboles SVG skinables

Quels sont les avantages de l'utilisation des symboles SVG au lieu d'autres formats d'image pour la conception Web?

Les symboles SVG présentent de nombreux avantages par rapport à d'autres formats d'image tels que JPEG, PNG ou GIF. Premièrement, les SVG sont des graphiques vectoriels évolutifs, ce qui signifie qu'ils peuvent être redimensionnés sans perdre de qualité. Ceci est particulièrement utile pour la conception Web réactive, où la même image doit être affichée sur différents appareils à différentes tailles. Deuxièmement, les symboles SVG peuvent être appelés à l'aide de CSS, améliorant ainsi la flexibilité de conception. Enfin, la taille du fichier de SVG est généralement plus petite que son homologue bitmap, ce qui peut accélérer le chargement et améliorer les performances du site Web.

Comment modifier la couleur du symbole SVG?

Vous pouvez utiliser CSS pour modifier la couleur du symbole SVG. Par défaut, SVG hérite de la couleur de son élément parent. Cependant, vous pouvez remplacer ce paramètre en positionnant le SVG ou ses éléments enfants dans CSS et en appliquant la couleur souhaitée. Par exemple, vous pouvez utiliser l'attribut fill pour changer la couleur à l'intérieur du SVG, ou utiliser l'attribut stroke pour modifier la couleur de son contour.

Puis-je utiliser des symboles SVG dans tous les navigateurs Web?

Les symboles SVG sont largement pris en charge dans tous les navigateurs Web modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, les versions plus anciennes d'Internet Explorer (IE8 et ci-dessous) ne prennent pas en charge SVG. Si vous devez prendre en charge ces anciens navigateurs, vous devrez peut-être fournir des images PNG ou JPEG en tant que repli.

Comment animer les symboles SVG?

Les symboles SVG peuvent être animés à l'aide de l'animation CSS ou JavaScript. Les animations CSS sont plus simples et fonctionnent mieux, mais JavaScript offre plus de contrôle et de flexibilité. Vous pouvez animer diverses propriétés d'un SVG telles que sa position, sa taille, sa rotation, sa couleur et sa opacité.

Puis-je utiliser des symboles SVG dans HTML?

Oui, les symboles SVG peuvent être intégrés directement dans HTML. Cela peut être fait en utilisant les balises <svg></svg> et <symbol></symbol>. La balise <symbol></symbol> est utilisée pour définir le symbole SVG, et la balise <use></use> est utilisée pour l'instancier. Cela vous permet de définir le symbole SVG à la fois et de le réutiliser plusieurs fois dans le HTML.

Comment rendre mes symboles SVG plus accessibles?

Pour rendre vos symboles SVG plus accessibles, vous devez utiliser les balises <title></title> et <desc></desc> dans le SVG pour fournir un texte alternatif. La balise <title></title> fournit un court titre descriptif pour SVG, et la balise <desc></desc> fournit une description plus longue. Ces balises sont lues par les lecteurs d'écran et fournissent un contexte vital aux utilisateurs malvoyants.

Puis-je utiliser des symboles SVG dans CSS?

Oui, le symbole SVG peut être utilisé comme image d'arrière-plan dans CSS. Cela peut être fait en codant pour le SVG en tant qu'URL de données et en l'utilisant comme valeur de l'attribut background-image. Cependant, cette méthode ne vous permet pas de style ou d'animer le SVG avec CSS.

Comment optimiser mes symboles SVG pour les performances?

Il existe plusieurs façons d'optimiser vos symboles SVG pour les performances. Tout d'abord, vous pouvez compresser le code SVG pour réduire sa taille de fichier. Deuxièmement, vous pouvez utiliser la compression GZIP pour réduire davantage la taille du fichier. Enfin, vous pouvez utiliser HTTP / 2 pour servir votre SVG, ce qui permet un transfert de données plus rapide et plus efficace.

Puis-je utiliser des symboles SVG dans JavaScript?

Oui, les symboles SVG peuvent être utilisés dans JavaScript. Cela vous permet de modifier dynamiquement les propriétés du SVG, telles que sa couleur, sa taille, son emplacement et sa visibilité. Vous pouvez également utiliser JavaScript pour animer les SVG, créer des SVG interactifs et charger les SVG dynamiquement.

Comment créer des symboles SVG réactifs?

Pour créer un symbole SVG réactif, vous devez utiliser des unités relatives (telles que des pourcentages) pour la largeur et la hauteur du SVG, plutôt que des unités absolues (telles que les pixels). Cela permet au SVG de se mettre à l'échelle avec son élément parent. Vous pouvez également utiliser l'attribut viewBox pour spécifier le rapport d'aspect et le système de coordonnées du SVG, ce qui lui permet d'échelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!