Étiquette : svg

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

  • déléguer un événement à un élément du DOM créé dynamiquement
  • détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

Javascript dans le cas d’un SVG:

[Webpack Encore] Exploiter la méthode .addRule() et le module Assets Module pour optimiser des fichiers SVG

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Installer image-webpack-loader:

Dans webpack.config.js:

Attention au chemin renseigné pour la méthode .setOutputPath(): c’est là que vos SVG optimisés seront consignés.

Dans assets/app.js


Solution alternative avec le module svgo-loader (mais ne prend en charge que le format SVG):

Dans webpack.config.js:

Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari

Picto SVG qui s’affiche correctement sous Mac et le navigateur Safari:

Le même picto SVG (code source différent) qui ne s’affiche pas sous Mac et le navigateur Safari:

[CSS print] Imprimer des couleurs de fond avec SVG et du texte en couleur

Imprimer des couleurs de fond avec SVG

Source: Printing background colors with CSS and SVG

Browser support

  • Works on all modern desktop browsers (tested in Edge 14–16, Firefox 58–60, Chrome 61–63, Safari 11)
  • Not tested on mobile browsers
  • Does not work in IE11
    • Imprimer du texte en couleur

      Attention: testé uniquement sous Chrome! Appliquer -webkit-print-color-adjust: exact; sur l’élément body et cibler avec précision l’élément à imprimer en couleur (ne fonctionnera pas sur des enfants, si la couleur est déclarée sur un élément parent) tout en ajoutant !important.

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

Voir une autre approche avec gulp-svg-sprites qui génère un sprite SVG et une feuille SASS avec des mixins prêts à l’emploi.

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Icon System with SVG Sprites sur css-tricks.com.

Obtenir un guide de styles des icônes générées:

Des ressources à propos de SVG:

[Gulp] Génération d’une police d’icônes avec template en SASS

Attention : préférer les sources hébergées sur github.com à celles présentes dans les codebits du tutoriel.

template sass

Par rapport au tutoriel et aux sources du plug-in sur github.com, notez la présence d’un mixin init-icon-font.

gulpfile.js

Utilisation dans des sources SASS :

(bonus) Markup HTML planche d’icônes

How to generate an iconfont styleguide with Gulp

Source: How to generate html page with elements from scss in Gulp
sur Stack Overflow

Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:

Gulpfile.js:

./test.scss:

./template.jade

The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.

[Photoshop] Exporter ses icônes en SVG

Pompé intégralement sur : Exporter ses icônes en SVG depuis Photoshop

Voici la procédure pour exporter très rapidement l’ensemble des icônes d’un PSD au format vectoriel SVG.

Prérequis pour pouvoir exporter vos icônes au fomat SVG :

  1. Installer le script : save-ps-to-svg.jsx dans le dossier C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts
  2. Démarrer Photoshop et avoir Illustrator installé sur sa machine.

Les screenshots ci-dessous sont fait sur Photoshop CS6, mais le script d’export des icônes au format SVG devrait fonctionner également sur CS5.
Source : http://hackingui.com/design/export-photoshop-layer-to-svg/

Procédure d’export svg :

  1. Renommer les calques à exporter en terminant par .svg
    renommer-calque-en-point-svg
     
  2. Sélectionner la forme, appuyer sur A (outil de sélection de tracé) et cliquer sur fusionner les composants de forme.
    fusionner-les-composants-de-forme
     
  3. Lancer le script via Fichier / Script, Illustrator va se lancer automatiquement et exporter un à un les calques .svg à l’endroit où vous avez sauvegardé votre PSD.

Le script :

[IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs

Article connexe avec d’autres astuces: [Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes.

SVG Cleaner

Batch, tunable, crossplatform SVG cleaning program : SVG Cleaner sur github.com.

Une version executable à télécharger sur Sourceforge.

Export your vector layers from PS to SVG in a single click!

Free photoshop script: Export your vector layers from PS to SVG in a single click!. What this Photoshop script does:

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute.
No more slicing SVGs one by one like a caveman. Finished preparing your layers? Boom!

Exporter une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks CS6 et l’ajouter à une police d’icônes générée à l’aide de l’App Icomoon

Remarque : Photoshop CC 2015 ne permet pas d’export au format *.ai :/

Problème :

Si pour x raison(s), le fait :

  1. d’enregistrer une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks,
  2. d’ouvrir ensuite le fichier sous Illustrator pour le ré-enregistrer au format *.svg
  3. et d’importer, pour finir, ce fichier dans son nouveau format depuis l’App Icomoon…

…n’affiche pas du tout l’icone comme elle devrait, suivez la procédure ci-dessous :

Solution :

  1. Dans Fireworks, à l’aide de l’Outil Pointeur, sélectionner l’ensemble de tracés vectoriels qui constituent votre icône.
    fw-exporter copie
  2. Ctrl+c pour copier vos tracés, Ctrl+n pour créer un nouveau document. Dans la modale « Nouveau document » qui s’ouvre, dans la section « Couleur de la zone de travail », sélectionner « Transparente » puis bouton « OK ».
  3. Ctrl+v pour coller vos tracés dans le nouveau document.
  4. Menu « Fichier > Enregistrer sous ». Choisissez comme format de sortie (« Type ») « Illustrator 8 (.ai) » puis bouton « Enregistrer ».
  5. Rendez-vous sur : Zamzar – Conversion de AI à SVG en ligne et gratuitement. On ne va pas utiliser Illustrator pour convertir au format *.svg notre icône fraîchement exportée depuis Fireworks au format *.ai.
  6. Suivre les étapes 1 à 4. Utiliser une adresse e-mail jetable (yopmail.com fonctionne bien avec Zamzar) pour récupérer votre icône au format *.svg.
  7. Vérifiez vos mail : un lien pour télécharger une icône immédiatement exploitable avec l’App Icomoon vous y attend.
  8. Pleurez de joie, voilà c’est fini !

Après import, l’icône n’est que partiellement, voir pas du tout, visible dans IcoMoon

Edit 6 août 2022: pour ce problème avec des icônes issues de Figma, voir ici: Convert strokes to vector objects.

Source : http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/.

Problème :

A l’import du fichier svg dans IcoMoon l’icône n’est que partiellement, voir pas du tout, visible. La capture ci-dessous montre le problème. La même icône à été importée deux fois (mais il y a une différence entre les deux fichiers, nous allons voir ça plus bas).

icomoon-incomplete_icon

Ci-dessous, une capture en provenance d’Illustrator qui montre la différence, à la source, entre les deux icônes :

icomoon-illustrator

Solution :

Afin que l’ensemble des éléments vectoriels qui constituent une même icône soient importés dans IcoMoon, il faut pouvoir sélectionner non pas les tracés mais les contours de celle-ci. On voit dans la capture de gauche que ce sont (sauf pour la serrure) des tracés qui sont sélectionnés. Dans la capture de droite, ce sont les contours qui sont sélectionnés.

Pour ce faire, sélectionner l’ensemble des tracés à l’aide de l’outil Lasso ou de l’outil Baguette Magique puis Objet > Décomposer.

Transformer un SVG en icône à l’aide d’icomoon génère des tranches (paths) multiples au sein d’un seul et même glyphe

Source : SVG to Ico using icomoon generates multiple path instead of single object glyph.

Problème :

Exemple de fichier CSS généré pour une icône unique :

Ce problème intervient lorsque les tracés SVG importés embarquent plusieurs couleurs. Les icônes au sein d’une police ne peuvent contenir qu’une seule couleur par défaut.
Pour « traduire » des icônes multicolores via CSS, Icomoon crée plusieurs calques qu’il superpose. Ces glyphes nécessitent ainsi plus d’un seul caractère et ne peuvent avoir de ligatures.

Solution :

Pour éviter les glyphs multicolores, il faut ré-importer la source SVG après avoir réduit son nombre de couleurs à une seule. On peut pour ce faire tenter ce convertisseur en ligne : PicSvg – Convertir une image en Svg .

Solution #2: on le corrige à la main (comme les vrais) à l’aide d’Illustrator

Voir ici : Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)

Paramètres de sauvegarde des SVG pour création d’une police d’icônes :

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options:
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Je n’ai aucun outil de type Illustrator/Fireworks à disposition et j’ai déjà une icône au format SVG, mais elle comporte plusieurs calques et/ou couleurs qui empêchent d’obtenir un résultat optimal en police d’icônes.

Utiliser la moulinette http://picsvg.com/fr.php pour ‘nettoyer’ vos SVG. L’outil est conçu à la base pour convertir un JPG ou un PNG en SVG mais permettrait aussi, dans certains cas, de rendre un SVG propre à la conversion en police d’icônes. A tester, surtout si vous ne disposez d’aucune appli pour retoucher vos sources.