Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Community Manager

    Tutoriel pour apprendre à utiliser le format SVG - les bases
    Chers membres du club,

    J'ai le plaisir de vous présenter une série de tutoriels de Maurice Chavelli qui se propose de vous apprendre à utiliser le format SVG. Dans cette première partie, nous allons en apprendre les bases.

    Les images au format SVG (Scalable Vector Graphics) sont vectorisées, contrairement aux images au format JPG ou PNG par exemple. Qu'est-ce que ça implique ?
    • On peut donner la dimension qu'on veut à une image SVG sans perte de qualité.

    • Le format est basé sur XML, donc lisible et facilement modifiable, il est aussi peu encombrant.

    • On peut ajouter du style CSS.

    • On peut créer des animations de plusieurs façons.


    Retrouvez les meilleurs cours et tutoriels pour apprendre le XML
    Vous avez envie de contribuer au sein du Club Developpez.com ? Contactez-nous maintenant !
    Vous êtes passionné, vous souhaitez partager vos connaissances en informatique, vous souhaitez faire partie de la rédaction.
    Il suffit de vous porter volontaire et de nous faire part de vos envies de contributions :
    Rédaction d'articles/cours/tutoriels, Traduction, Contribution dans la FAQ, Rédaction de news, interviews et témoignages, Organisation de défis, de débats et de sondages, Relecture technique, Modération, Correction orthographique, etc.
    Vous avez d'autres propositions de contributions à nous faire ? Vous souhaitez en savoir davantage ? N'hésitez pas à nous approcher.

  2. #2
    Membre averti
    Cool le tutoriel. Merci beaucoup.
    Je sais pas si c'est en rapport direct avec le tuto, mais il y a la bibliothèque d3.js qui permet de faire des trucs assez cool avec JS et SVG. https://d3js.org/.

  3. #3
    Membre éprouvé
    Super tuto !

    Le SVG est le deuxième langage le plus cool après le XAML :p

    J'ai toujours adoré ce langage qui est loin d'être aussi utilisé qu'il ne le devrait...
    Si c'était natif à l'écosystème UWP, Android et iOS, ça serait le pied.

    J'utilisais la lib Velocity.js pour animer le SVG.
    Exemple avec la banière sur mon site : http://krossapp.com/services.php
    "S'adapter, c'est vaincre" - Cellendhyll de Cortavar

  4. #4
    Community Manager

    Tutoriel pour apprendre à utiliser le format SVG - SVG et le web
    Chers membres du club,

    J'ai le plaisir de vous présenter la deuxième partie de cette série de Maurice Chavelli qui se propose de vous apprendre à utiliser le format SVG. Ce second tutoriel tente de montrer comment le SVG a trouvé sa place dans le web et présente également le potentiel encore peu exploité qu'il recèle.

    « SVG est à la fois construit avec le langage XML, donc quelque chose de bien structuré et aussi un format graphique. Ainsi, on ne peut pas séparer l'aspect graphique de la structure!
    Internet pullule d'images, mais elles sont en majorité aux formats PNG, JPG… De telles images se contentent d'être une représentation pixélisée et ne comportent rien d'autre. Il en va bien différemment du SVG ! Il est structuré, stylisable et modifiable.
    On peut même utiliser directement un fichier SVG pour créer une application utilisable sur le WEB.
    Le souci principal avec le SVG est sa prise en charge assez aléatoire selon les navigateurs, mais c'est également vrai pour certaines fonctionnalités du CSS3.
    En 2016 a été lancée la version 2 du SVG, mais combien de temps faudra-t-il avant de pouvoir l'utiliser ? Pour le moment, il faut se contenter de la version 1.1. »

    Bonne lecture.

    Retrouvez les meilleurs cours et tutoriels pour apprendre le XML
    Vous avez envie de contribuer au sein du Club Developpez.com ? Contactez-nous maintenant !
    Vous êtes passionné, vous souhaitez partager vos connaissances en informatique, vous souhaitez faire partie de la rédaction.
    Il suffit de vous porter volontaire et de nous faire part de vos envies de contributions :
    Rédaction d'articles/cours/tutoriels, Traduction, Contribution dans la FAQ, Rédaction de news, interviews et témoignages, Organisation de défis, de débats et de sondages, Relecture technique, Modération, Correction orthographique, etc.
    Vous avez d'autres propositions de contributions à nous faire ? Vous souhaitez en savoir davantage ? N'hésitez pas à nous approcher.

  5. #5
    Community Manager

    Tutoriel pour apprendre à utiliser le format SVG - On dessine
    Chers membres du club,

    J'ai le plaisir de vous présenter la troisième partie de cette série de tutoriels que vous propose Maurice Chavelli pour vous apprendre à utiliser le format SVG. Dans ce tutoriel, l'auteur va plus loin et montre les belles possibilités qui nous sont offertes.

    « La base du dessin c'est la ligne et SVG est bien équipé dans le domaine. On a vu qu'on dispose de la balise line. Par défaut on a stroke: none, ce qui signifie qu'une ligne n'est pas visible par défaut ! »

    Bonne lecture.

    Retrouvez les meilleurs cours et tutoriels pour apprendre le XML.
    Vous avez envie de contribuer au sein du Club Developpez.com ? Contactez-nous maintenant !
    Vous êtes passionné, vous souhaitez partager vos connaissances en informatique, vous souhaitez faire partie de la rédaction.
    Il suffit de vous porter volontaire et de nous faire part de vos envies de contributions :
    Rédaction d'articles/cours/tutoriels, Traduction, Contribution dans la FAQ, Rédaction de news, interviews et témoignages, Organisation de défis, de débats et de sondages, Relecture technique, Modération, Correction orthographique, etc.
    Vous avez d'autres propositions de contributions à nous faire ? Vous souhaitez en savoir davantage ? N'hésitez pas à nous approcher.

###raw>template_hook.ano_emploi###