Comment travailler avec des icônes en SVG
▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg
Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.
(cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)
Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
- les méthode pour gérer l’accessibilité,
– la gestion des « vieux » navigateurs
– les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
– des exemples d’utilisations des attributs fill et stroke
– les contournements des bogues connus des navigateurs
+ URL de SVGOMG (outil d’optimisation des fichiers SVG) : ►https://jakearchibald.github.io/svgomg
Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés
Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css
les librairies :
– SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
– Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ►http://dmitrybaranovskiy.github.io/raphael
et la compilation de références : ▻https://la-cascade.io/ressources/#svg
#icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries
How to work with SVG icons
►http://fvsch.com/code/svg-icons/how-to
“There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team…”
Markdown.css - make HTML look like plain-text
▻http://mrcoles.com/demo/markdown-css
#CSS to make #HTML markup look like plain-text #markdown.
The example below shows HTML that looks like markdown because of the markdown.css file.
:)
Y a un bookmarklet pour « markdowniser » les pages html, un peu comme le bon vieux bouton memo de #SPIP ;-)
Florent Verschelde avait fait remarkdown, il y a un an. Même principe, en mieux : ▻http://fvsch.com/code/remarkdown
#Icon #font #accessibility
►http://fvsch.com/code/icon-font-a11y
When we use common image replacement techniques, including the smart ones, the user agent doesn’t know what’s the relation between the text content and a #CSS #pseudo-element or background. This is not even a “CSS is for decoration” issue. It’s a “your code lacks semantic information” issue