Dessiner un SVG avec Illustrator, troisième article de notre série sur le SVG… après avoir vu les bases du SVG, puis appréhender la manière de coder ce format, nous vous présentons aujourd’hui comment créer bien plus simplement un dessin SVG avec Illustrator.
Rappel
Le SVG (Scalable Vector Graphics) est un format de dessin vectoriel parfait pour des besoins graphiques légers.
Le gros avantage du format SVG est qu’il ne stocke que les informations décrivant les formes dessinées, à savoir les coordonnées spatiales, les couleurs, et les effets appliqués
Exporter un dessin SVG avec Illustrator
Dans Illustrator, exporter un dessin SVG est très simple. Voici la marche à suivre :
- commençons par créer un fichier, via le menu Fichier > Nouveau, puis donnez lui un nom, avant de cliquez sur OK,
- dans le menu, choisissez Fichier > Enregistrer sous…
- dans le panneau déroulant Type, choisissez SVG,
- si ce n’est déjà fait, nommez votre fichier, sélectionnez le dossier adéquat, puis cliquez sur Enregistrer,
- validez les options du panneau Options SVG en cliquant sur OK.
Nota bene : dans le panneau Options SVG, le bouton Code SVG vous permet d’accéder directement au code SVG via un éditeur de texte.
Dessiner un SVG avec Illustrator
Dessinez un superbe tableau style Picasso, ou plus prosaïquement des figures simples :
Dessin SVG avec Illustrator
Enregistrez-le et ouvrez le fichier dans un éditeur de texte afin de contempler les entrailles de votre oeuvre :
Code SVG
Voilà, vous constatez qu’à la suite de quelques méta données, le code SVG XML est fin prêt à être insérer dans votre fichier HTML. On peut admirer ici les éléments <ellipse>, <polygon>, ainsi que <svg>.
Importer un dessin SVG dans un fichier HTML
Ouvrez votre fichier *.svg dans un éditeur de texte, ou directement dans Illustrator via le bouton Code SVG du panneau Options SVG, et copiez, balises comprises, tout le code situé entre les balise <svg>, que vous collez simplement dans votre fichier HTML.
<html> <body> <h1>Mon premier SVG</h1> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 100" enable-background="new 0 0 400 100" xml:space="preserve"> <ellipse fill="#934791" stroke="#000000" stroke-miterlimit="10" cx="41.6" cy="34.9" rx="36.1" ry="28.6"/> <polygon fill="#F9D70F" points="43.1,59.7 60.5,45.2 58.4,22.7 77.6,34.7 98.4,25.8 92.9,47.7 107.8,64.7 85.2,66.2 73.7,85.7 65.2,64.7 "/> </svg> </body> </html>
Le tour est joué !
Et aussi…
Pour voir la liste complète des éléments possibles en SVG, et en avoir la description, vous pouvez consulter la liste établie par Mozilla.
Reportez-vous aussi à la doc W3schools sur le SVG.
