[SVG] Artistes, vos outils font-ils des SVG "simples" ?

[Ter Rowan]

salut

je suis en train de tester du javascript pour changer des éléments de svg (couleur, opacité, etc...)

pour l'instant je n'utilise que mes propres dessins, réalisés sous le meilleur des outils graphistes, à savoir notepad++, avec des formes ultrasimples

au début je voulais utiliser des ressources du net mais les premiers svg sympas visuellement que j'ai trouvés étaient d'un bordel sans nom d'un point de vue code, aussi suis je parti sur mes propres chefs d'oeuvre pour réaliser mon poc

se pose la question : quand je vais vous payer (pas bcp, ne rêvez pas) pour me faire mes svg, est ce que vous me produirez du code svg bien comme je veux ?

voici mon dessin le plus abouti

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="80px" height="50px" xml:lang="fr"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

	<circle class="col1" cx="40" cy="25" r="20" fill="#60C0FF"/>

	<circle class="col2" cx="30" cy="15" r="5" fill="#FFFFFF"/>

	<circle class="col2" cx="40" cy="10" r="5" fill="#FFFFFF"/>

	<rect class="col3" width="80" height="30" fill="#303030" fill-opacity="0.3"/>	

</svg>

qu'est ce qu on voit ? un oeil avec un verre de lunettes de soleil remonté (oui, faut imaginer)

- la pupille de l'oeil (col1)
- deux petites lumières (col2) sais pas comment dire pour l'éclat de l'oeil, j'en ai mis deux pour pouvoir tester un changement sur deux zones
- le verre des lunettes (col3)

je veux pouvoir manipuler ultra simplement via un sélecteur jquery ==>

changer la couleur de l oeil : $(".col1").ChangeColor( newColor);
changer l'éclat des petits lumières : $(".col2").ChangeColor (newColor);
changer la couleur du verre des lunettes : $(".col3").ChangeColor(newColor);
changer l'opacité du verre : $(".col3").ChangeOpacity(newOpacity);

je devrais me sortir sans trop de problèmes pour le javascript (ce sera mochement codé, mais ca marchera)

mon souci est vraiment de savoir si, pour des dessins plus complexes (de l'art quoi), on peut arriver à cette syntaxe épurée, sans avoir à nettoyer complètement le svg généré ni cherchez ou mettre l'attribut "class" ?

[Myrina]

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.

[Ter Rowan]

Certes mais la tu me parles code

Les dessinateurs ne codent pas, ils dessinent

Ma question est ce qu un non programmeur peut obtenir comme code a partir d un inkscape ou compagnie

[Myrina]

La, je ne saurais te répondre

[Harparine]

Salut,
Le code d'inkscape est plutôt propre. Tu peux télécharger l'outil pour faire un test et ouvrir le fichier avec notepad++
@+

[Ter Rowan]

Plop, faudrait effectivement que j essaie mais après il me manquera l expérience du dessinateur :

Faire un rond bleu et deux ronds blancs, le processus est simple

Dessiner un visage ou un objet, avec un jeu d ombre, de reflet, c est avoir un processus (ie des étapes) plus complexe :

Est ce qu on travaille en couche genre une couche rouge, une couche ombre, une couche reflet blanc, une couche je sais pas quoi, ce qui permet en changeant la couleur rouge d avoir un objet complètement différent mais avec tous les effets

Ou est ce qu on travaille avec toute une palette de rouges et, au final, j ai des zones rouges foncées, rouges claires, roses, etc.. Qui donnent exactement le meme rendu visuel que précédemment mais par contre impossible a transformer en vert / en bleu / autre


Je sais pas si je suis clair dans ma problématique :/

[Harparine]

Pour l'avoir fait (pas avec Inkscape mais en Flash) pour des tests de générateurs d'avatars, le plus facile avec du vectoriel est d'avoir des aplats de couleurs correspondant à des zones modifiables (iris, peau, cheveux, vêtements1, etc.) que l'on "esthétise" ensuite avec des calques d'ombres et de lumière. J'ai commencé à tester sur Inkscape il y a quelques temps et il semble possible de le faire en groupant les objets simples utilisés pour constituer une forme complexe. Le code d'Inkscape est plutôt propre et tu peux le retoucher pour ajouter des id ou des classes (à travailler en cas de plusieurs formes de même couleur ?) ici et là. Evidemment, cela suppose que ton graphiste bosse en ayant cela en tête.
Voici un exemple du rendu que peut donner cette technique (générateur en Flash, en local pour l'instant) :
http://www.gunof.net/img/avatars_vectoriel.png

Une autre possibilité est d'utiliser des images bitmap sur lesquelles le graphique rajoute directement les ombres et lumières sur le même calque que la couleur. Il suffit de séparer les calques et d'en modifier la couleur avec GD sur le serveur (il est peut-être possible de le faire en javascript mais je n'ai pas essayé). Idem, voici des exemples d'avatars générés selon cette technique (comme précédemment, je n'ai pas d'outil en ligne car je bidouille en local pour tout ces générateurs d'avatars) :
http://www.gunof.net/img/avatars_bitmap.png

@+

[Ter Rowan]

Ok c est donc complètement faisable pour faire quelque chose de qualité (chapeau pour la qualité de tes dessins)

Merci pour ton retour