23-02-2013, 09:58 AM
Pour commencer, tu peux mettre un id à chaque élément, ainsi le ciblage de l'élément est plus simple. Pour cibler un ensemble cohérent d'éléments tu peux les grouper (<g>) à la manière d'un div.
Ensuite, pour modifier un objet SVG, tu utilises de préférences les transformations (directement ou via des animations).
Tes deux lumières sont deux fois le même objet, donc tu peux définir (<defs>) ton objet de manière générique puis l'utiliser (<use>) deux fois à des emplacements différents (=> moins de code dupliqué).
Il faut aussi tenir compte de la manière dont tu prévois le rendu dans le navigateur:
- fichier SVG pur
- fichier HTML contenant une balise <svg>
- fichier HTML incluant un objet ou une iframe <svg>
Ceci est important car l'implémentation et les fonctionnalités diffèrent encore selon l'utilisation faite (j'ai notamment des soucis avec des animations qui ne fonctionnent pas dans certains cas avec certains navigateurs). Et l'implémentation imposera également la manière d'inclure du javascript dans le SVG.
Tu as une bonne présentation ici
Et personnellement, j'utilise beaucoup ce site pour mes développements SVG.
Ensuite, pour modifier un objet SVG, tu utilises de préférences les transformations (directement ou via des animations).
Tes deux lumières sont deux fois le même objet, donc tu peux définir (<defs>) ton objet de manière générique puis l'utiliser (<use>) deux fois à des emplacements différents (=> moins de code dupliqué).
Il faut aussi tenir compte de la manière dont tu prévois le rendu dans le navigateur:
- fichier SVG pur
- fichier HTML contenant une balise <svg>
- fichier HTML incluant un objet ou une iframe <svg>
Ceci est important car l'implémentation et les fonctionnalités diffèrent encore selon l'utilisation faite (j'ai notamment des soucis avec des animations qui ne fonctionnent pas dans certains cas avec certains navigateurs). Et l'implémentation imposera également la manière d'inclure du javascript dans le SVG.
Tu as une bonne présentation ici
Et personnellement, j'utilise beaucoup ce site pour mes développements SVG.