Puis-je réduire la taille du fichier d'un fichier SVG pour qu'il soit plus proche de son équivalent au format JPEG?

J'ai une image que j'utilise sur un site web. J'aimerais utiliser un fichier SVG pour qu'il puisse être de n'importe quelle taille et avoir toujours l'air net.

• Cette liste déroulante contient le fichier SVG ainsi que le fichier Illustrator d'origine.

• Ceci est une exportation JPEG:

  

Le fichier SVG a une taille de fichier beaucoup plus grande que le fichier JPG. Est-il possible d'optimiser le fichier SVG pour qu'il ait une taille de fichier similaire? Je pourrais peut-être perdre une partie de la qualité si cela pouvait aider. J'ai essayé cet optimiseur SVG , mais cela ne faisait pas beaucoup de différence.

Si j'enregistre le fichier illustrator au format JPG, trace le résultat et l'enregistre au format SVG, la taille du fichier est beaucoup plus petite, mais la qualité perd légèrement. Cela me fait penser que peut-être les calques de l'original sont à l'origine de la grande taille? L'image sur laquelle je travaille est-elle trop complexe pour être adaptée au format SVG?

Votre fichier SVG contient un graphique en pixels intégré pour la teinte en bas à droite du contrôleur. Ceci est responsable d'environ de la taille du fichier. Si vous le supprimez, votre fichier SVG est identique à votre JPEG. Vous pouvez probablement obtenir un effet suffisamment similaire avec un dégradé.

Parmi les autres techniques permettant de réduire la taille du fichier SVG, citons:

• Supprimer toutes les métadonnées et similaires. Inkscape a pour fonction Enregistrer au format SVG . Je suppose que d'autres programmes ont quelque chose de similaire.
• Supprimez les nœuds qui ajoutent peu aux formes, par exemple, il y a des nœuds parasites sur la forme de votre contrôleur.

Cela me fait penser que peut-être les calques de l'original sont à l'origine de la grande taille?

Sauf si vous utilisez un nombre absurde de calques (pensez à un calque pour chaque objet), les calques ne doivent pas contribuer de manière significative à la taille du fichier. Même dans ce cas, il ne s'agirait que d'une fraction.

L'image sur laquelle je travaille est-elle trop complexe pour être adaptée au format SVG?

Si vous pouvez raisonnablement créer une image à partir de rien¹, cela ne devrait pas être trop complexe pour le format SVG. Il n’existe pas de seuil de complexité magique au-delà duquel la taille des fichiers explose (cela est probablement vrai pour tout format vaguement raisonnable). Bien entendu, si vous ne choisissez que la résolution suffisamment grossière, vous pouvez exporter chaque fichier SVG au format JPEG dont la taille de fichier est inférieure. Mais cela ne signifie pas nécessairement que vous ne devez pas utiliser de SVG.

^{¹ C'est notamment sans traçage et similaire. Pour donner un exemple extrême: si vous voulez reproduire exactement chaque pixel d’une photo avec des primitives SVG (c’est-à-dire sans incorporer de graphismes pixel dans SVG), vous pouvez considérer le résultat comme trop complexe pour être efficacement représenté au format SVG. . Mais c'est du bon sens, espérons-le.}

Comme Wrzlprmft l'a déjà indiqué, plus de 50% de la taille de votre fichier SVG est occupée par une image bitmap PNG intégrée utilisée pour créer un effet d'ombrage assez subtil sur le contrôleur. Il suffit de supprimer cette image et de la remplacer par un simple dégradé radial pour réduire le format SVG à environ 10 Ko.

               
^{Image originale avec une nuance de bitmap fantaisie à gauche, version modifiée avec un simple dégradé radial à droite.}

Pendant que vous y êtes, vous devriez également vérifier vos chemins pour voir s’il ya quelque chose à simplifier. Je n'ai pas trouvé grand chose, mais le contour de votre contrôleur a quelques nœuds adjacents (près du haut et du bas au milieu) qui peuvent être fusionnés sans faire de différence visible.

C'est une économie facile de 50%, mais ne nous arrêtons pas pour l'instant. Si vous connaissez même un peu le format SVG , vous pouvez faire beaucoup mieux que cela.

Tout d’abord, lancez "Vacuum Defs" dans Inkscape pour éliminer les définitions inutiles, puis enregistrez l’image au format "SVG". Maintenant, il est temps de l'ouvrir dans un éditeur de texte et de voir ce dont on peut se débarrasser. Idéalement, vous devriez utiliser un éditeur avec une prévisualisation SVG intégrée, afin de pouvoir rapidement voir quel effet (espérons-le, aucun) vos modifications ont sur l'apparence de l'image. J'utilise emacs pour cela, mais il existe d' autres éditeurs avec des fonctionnalités similaires .

Quoi qu'il en soit, avec le fichier SVG ouvert dans votre éditeur de texte, commençons par le simplifier!

• Tout en haut, il y a un gros inutile <!-- comment -->. Supprimez-le simplement.

• Si vous modifiez un fichier SVG directement à partir d'Illustrator, il existe également une <!DOCTYPE ... >ligne inutile . Supprimez-le aussi.

• Inkscape insiste pour coller un bloc de métadonnées RDF inutile dans votre image. Il suffit de localiser la <metadata ...>balise et de la supprimer, ainsi que tout le reste, y compris la fermeture </metadata>.

• De plus, même si vous enregistrez le fichier en tant que "SVG ordinaire", Inkscape le lit toujours avec une série d'attributs personnalisés. Recherchez tous les attributs commençant par inkscape:ou sodipodi:et supprimez-les.

• Avec les métadonnées et les attributs spécifiques à Inkscape supprimés, vous pouvez supprimer tous les attributs d'espace de nom XML inutilisés de la <svg>balise. Il doit être sûr d'éliminer au moins xmlns:rdf, xmlns:dc, xmlns:cc, xmlns:inkscapeet xmlns:sodipodi. S'il existe un xmlns:svgattribut redondant , supprimez-le également. Les seuls attributs d'espace de noms que vous devriez avoir laissés à ce stade sont les suivants:

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

• La <svg>balise contient également d’autres attributs inutiles que vous pouvez supprimer en toute sécurité, tels que enable-backgroundet xml:space="preserve". (Ceux -ci sont insérés par l'exportateur SVG Illustrator et Inkscape est pas assez intelligent pour se rendre compte qu'ils ne servent à rien.) L' viewBoxattribut peut également être retiré en toute sécurité de cette image, car il répète simplement les valeurs des x, y, widthet heightattributs.

• Vous pouvez également supprimer en toute sécurité les attributs encodinget standalonede la <?xml ... ?>balise.

• Passons maintenant à l'intestin des données d'image. Pour une raison quelconque, Inkscape insiste sur l'attribution d' idattributs à chaque élément, même s'ils ne sont jamais référencés. Tout idattribut dont la valeur n'est jamais répétée ailleurs dans le fichier (recherchez-le!) Peut être supprimé en toute sécurité. Fondamentalement, les seuls identifiants que vous devez conserver sont ceux des gradients et éventuellement de tout autre objet (par exemple, des chemins) trouvé dans les <defs>sections.

• En outre, Inkscape aime générer de longs identifiants comme linearGradient4277. Pensez à abréger les identifiants que vous ne pouvez pas simplement supprimer en quelque chose de court, comme à la lg1place.

• Il y a aussi plusieurs <defs>sections les unes après les autres. Leur fusion enregistre quelques octets (et simplifie la structure du document en général).

• Il existe également plusieurs groupes vides ( <g>éléments) à la fin du fichier. Il suffit de s'en débarrasser. Il peut également y avoir plusieurs groupes consécutifs avec exactement le même transformattribut (ou aucun). il est également prudent de les fusionner.

• Pour des raisons étranges, Inkscape enregistre un chemin ( dattribut) de Bezier redondant pour les <circle>éléments. Cela prend de la place sans aucune raison, alors supprimez-les. (Laissez les dattributs sur les <path>éléments être; ceux-ci sont réellement utilisés pour quelque chose.)

• Inkscape aime également utiliser CSS dans les styleattributs où des attributs plus spécifiques seraient plus courts, par exemple la réécriture fill="#4888fa"pour les plus détaillés style="fill:#4888fa". Vous pouvez économiser quelques octets en décomposant ces styles en attributs individuels (et en supprimant ceux qui ne font que répéter inutilement le réglage par défaut), mais cela nécessite un peu plus de familiarité avec le format SVG que la plupart des modifications ci-dessus.

• De plus, s'il y a des <use ... >éléments, vous pourrez peut-être sauvegarder quelques octets en les remplaçant par l'élément auquel ils sont liés. (Bien entendu, cela ne permet d'économiser de l'espace que si les éléments liés ne sont utilisés qu'une seule fois.) Il semble également qu'Inkscape aime définir les dégradés circulaires de manière indirecte, en définissant d'abord les arrêts dans un <linearGradient>, puis en les référençant dans un <radialGradient>; vous pouvez simplifier cela en déplaçant les arrêts directement à l'intérieur du dégradé radial et en vous débarrassant du dégradé linéaire désormais inutilisé. En prime, si vous réussissez à vous débarrasser de tous les xlink:hrefattributs, vous pouvez supprimer cet xmlns:xlinkattribut de la <svg>balise.

• Si vous voulez vraiment extraire chaque dernier octet supplémentaire, recherchez des valeurs numériques avec trop de décimales et arrondissez-les à une valeur plus raisonnable. C'est ici que l'aperçu en direct est vraiment utile, car il vous permet de voir combien vous pouvez arrondir la valeur avant qu'elle ne soit visible. Même si vous ne voulez pas tester soigneusement chaque nombre pour voir dans quelle mesure il peut être arrondi, vous pouvez au moins choisir des résultats faciles, comme arrondir une valeur de 1.0000859pixels à juste 1.

• Enfin, nettoyez l’indentation et les espaces dans le fichier. Pour minimiser absolument le nombre d'octets, vous devez tout mettre sur une ligne (ou du moins, ne mettre que les sauts de ligne devant les attributs, où les espaces sont de toute façon obligatoires), mais c'est vraiment difficile à lire. Néanmoins, il est possible de trouver un bon équilibre entre lisibilité et compacité avec une indentation simple et conservatrice.

Quoi qu'il en soit, voici ce que j'ai réussi à éditer à la main votre image SVG dans:

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

Cette image SVG ne ressemble pratiquement pas au deuxième exemple d’image ci-dessus et ne prend que 5 189 octets, soit beaucoup moins que votre image JPEG. Je suis sûr que cela pourrait encore être optimisé, mais ce n’est vraiment qu’un exemple de ce que vous pouvez faire en quelques minutes avec la pratique. (Il m'a fallu beaucoup plus de temps pour écrire cette réponse que pour éditer le code SVG.)

Enfin, compresser ce code SVG avec gzip le réduit à seulement 1846 octets (!), Soit à peine plus du quart de la taille de votre version JPEG.

Je suis un peu surpris que personne n'ait mentionné l' extension " Scour ". Il est fourni avec Inkscape (à partir de la version 0.47) et effectue bon nombre des optimisations mentionnées par Ilmari Karonen.

Vous pouvez le convertir en SVG compressé (SVGZ) et placer le fichier image.svgz sur votre page Web:

gzip image.svg
mv image.svg.gz image.svgz

Ou bien, dans Adobe Illustrator, enregistrez simplement sous "SVG compressé" pour écrire un fichier image.svgz.

Pour votre image de test, il est toujours plus grand que le JPG, cependant:

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

J'ai récemment trouvé un outil à l' adresse https://petercollingridge.appspot.com/svg-editor ( code source ) qui permet d'optimiser les fichiers SVG. Dans ce cas, les résultats sont bons: la taille du fichier est ramenée à 3,7 Ko, soit un peu plus de la moitié de la taille du fichier JPG, avec un petit réglage manuel:

Utiliser cet outil pour optimiser les fichiers SVG nécessite beaucoup moins de temps que de jouer au golf manuellement.

SVGOMG! est une application Web géniale pour l'optimisation SVG

Selon le créateur de l'application, SVGOMG est SVGO « de M Issing G UI ».

Le faire fonctionner sur l'image fournie le réduit à juste 3.42kb, et juste 1.4kbaprès avoir été compressé.