Tutoriel Inkscape - sommaire

Inkscape : exporter au format PNG une image vectorielle

Il n'est pas toujours évident d'insérer dans une page web une image vectorielle.
Vous savez déjà que si dans la plupart des cas on peut utiliser la balise HTML img OU la propriété CSS background avec la commande URL.
Mais dès que le fichier SVG contient du Javascript ou des liens vers d'autres images ou vers une feuille de style externe alors il faut intégrer l'image avec la balise object.

Par ailleurs certains sites qui gèrent des blogs (je pense en particulier à Wordpress.com) refusent le format SVG.

Donc si vous voulez intégrer une image dans un article/page de votre blog hébergé chez Wordpress.com vous êtes obligé d'incorporer l'équivalent matriciel du document inkscape.

Créer la version matricielle d'un image SVG

En fait c'est d'une simplicité enfantine.

La procédure est la suivante :
• ouvrez le fichier SVG avec Inkscape (qu'il ait été produit avec Inkscape ou avec Notepad)
• produisez la commande Fichier/exporter une image PNG
• Donnez les dimensions de la nouvelle image matricielle

Exemple

Ci-dessous un document SVG produit avec Inkscape représentant le système solaire (le soleil, la terre et la lune) :

Puis j'ai exporté au format PNG ce document pour obtenir l'image bitmap ci-dessous :

Vous constatez que l'image vectorielle (la première) est plus nette que l'image matricielle (la seconde).
Et pourtant le fichier PNG (300 par 200 pixels) pèse 11 KO alors que le fichier SVG ne fait que 4 KO.

Maintenant, mais je me répète, si vous voulez intégrer cette image dans votre blog géré par wordpress.com vous ne pouvez téleverser que des images matricielles et jamais une image SVG.