L'article explore l'utilisation des animations SMIL (Synchronized Multimedia Integration Language) dans les SVG pour enrichir les conceptions web. Contrairement aux idées reçues, SMIL n'est pas obsolète et offre des moyens simples et sémantiques d'ajouter des animations aux designs. L'auteur, Andy Clarke, démontre comment SMIL peut être utilisé pour créer des animations complexes, synchroniser plusieurs animations et contrôler les transformations et les chemins de mouvement. Il met en lumière les avantages de SMIL, notamment sa capacité à fonctionner sans dépendre de JavaScript ou de frameworks, et son intégration directe dans les fichiers SVG, ce qui le rend idéal pour des effets d'animation compacts et portables.
L'article explore les bases et les possibilités des SVGs (Scalable Vector Graphics) sur le web. Contrairement aux autres formats d'image, les SVGs sont basés sur XML et peuvent être intégrés directement dans le HTML, permettant une manipulation dynamique avec CSS et JavaScript. L'article couvre les formes de base comme les lignes, rectangles, cercles, et polygones, et explique comment utiliser le viewBox pour rendre les SVGs scalables. Il aborde également les attributs de présentation comme fill et stroke, et montre comment animer ces propriétés pour créer des effets visuels captivants. En résumé, les SVGs sont un outil puissant et sous-estimé pour créer des illustrations interactives et dynamiques sur le web.
Suite de https://www.smashingmagazine.com/2025/06/decoding-svg-path-element-line-commands/ l'article explore les aspects complexes de l'élément path en SVG, en se concentrant sur la création de courbes et d'arcs. L'autrice explique les règles sous-jacentes et les fonctions de construction des courbes de Bézier quadratiques et cubiques, ainsi que des arcs, en utilisant des exemples visuels et des animations pour illustrer les concepts. L'article aborde également l'utilisation des commandes Q, T, C, S, et A pour dessiner ces formes, offrant ainsi une compréhension approfondie de la syntaxe et des mécanismes de l'élément path en SVG.
L'article explore les bases de l'élément
L'article explore les techniques pour rendre les animations SVG plus rapides, plus simples et plus faciles à gérer. L'auteur s'inspire des dessins animés classiques pour créer des animations modernes en utilisant des outils comme CSS et SVG. Il souligne l'importance de commencer avec un design propre et d'optimiser les fichiers SVG en réduisant les points d'ancrage et en utilisant des outils comme SVGOMG pour minimiser la taille des fichiers. L'article détaille également comment structurer le code SVG en couches pour faciliter l'animation et la maintenance, tout en réutilisant des éléments pour améliorer l'efficacité et la performance.
Il est possible d'appliquer des styles CSS à SVG. Il y a 3 cas principaux : SVG inline (facile à manipuler en CSS), SVG externe (limité), et SVG via
Tout est dans le titre
Tout est dans le titre
Bonnes pratiques d'accessibilité pour un bouton "fermer" avec un svg
Article intéressant, mais aucun des codepen n'affiche quoi que ce soit, dommage
Tout est dans le titre
Tout est dans le titre
A book apart a fermé... Certains de leurs livres se retrouvent disponibles sur le web, dont celui-ci
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Un outil en ligne pour convertir un SVG des images jpeg ou png (via sebsauvage)
Je cite
Plein de générateurs de SVG de découpe au laser pour des modèles de boîtes de toutes sortes et formes, de roues dentées, de puzzles etc... et même des découpes de boîtes en papier...