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

37

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:

    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?

Evanss
la source
16
Pas lié à votre question, mais vous ne devriez pas utiliser JPG pour des images comme celle-ci. Utilisez plutôt PNG: la taille sera probablement similaire et vous ne perdrez aucune qualité.
svick
Réalisez que la comparaison dépendra de la taille physique de l'image. La mise à l'échelle d'un fichier JPEG augmente considérablement la taille. La mise à l'échelle d'un fichier SVG n'a aucun effet. Il est concevable qu'une très petite icône soit plus petite qu'un fichier JPEG, bien que je n'appellerais pas votre graphique très petit.
Paul Draper
Si vous n'êtes pas un utilisateur d'Inkscape et que vous ne vous sentez pas à l'aise pour jouer à la SVG à la main, vous aimerez peut-être l'outil en ligne auquel je me suis associé dans ma réponse .
Dom
1
Juste pour ajouter au commentaire de svick: des images "comme celle-ci" où le format PNG est préférable sont tout ce qui a des bords transparents ou tout ce qui a des zones de couleur unie ou blanches. S'il s'agit d'un "graphique" (par exemple un logo, une icône, etc.) et non d'une "photo", le format PNG est généralement préférable. JPG est préférable pour les photographies (ou les images photo-réalistes).
user56reinstatemonica8

Réponses:

40

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.

Wrzlprmft
la source
80

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.

        Original         Avec gradient radial simple
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.

Ilmari Karonen
la source
4
Joliment joué au golf .
Wrzlprmft
7
débarrassez-vous des sauts de ligne et économisez 50 octets supplémentaires :)
Yorik
15
Je devais rejoindre ce site juste pour upvoter cette réponse géniale! Bien joué!
Karl-Johan Sjögren le
Salut Ilmari, je me demande si tu pourrais consulter l'application Web à laquelle j'ai lié une réponse et confirmer si elle fait tout ce que tu ferais à la main? Je l'ai utilisé sur un grand SVG avec des réductions incroyables, mais lorsque j'ai également exécuté ce SVG sur un autre service au préalable, j'ai pu économiser 2 Ko supplémentaires. Lorsque j'inspecte le code SVG, je vois encore des métadonnées avec des liens vers Adobe, et je ne sais pas si c'est nécessaire. Votre sagesse SVG est grandement appréciée.
Dom
30

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.

Quelqu'un
la source
14
+1 c'est génial! Honnêtement, je n'étais même pas au courant de l'existence de cet outil. Avec les bonnes options, la version en ligne de commande bat même mon code optimisé manuellement de près de 200 octets. Son exécution sur le code optimisé manuellement le réduit à 4571 octets (!).
Ilmari Karonen
5

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
Glenn Randers-Pehrson
la source
6
Les SVG compressés ne fonctionnent malheureusement pas dans la plupart, sinon dans la totalité, des IE récents. L'idée est utile, mais IE le rend beaucoup moins viable. +1 quand même parce que ce n'est pas votre faute IE $ ucks. :)
Dom
5
@Dom, l'expérience avec IE et PNG suggère 3 à 5 décennies plutôt que des années.
Glenn Randers-Pehrson
3
Bashing IE ne cesse jamais de m'amuser! :) C'est vraiment cool que nous puissions attirer quelqu'un de votre niveau d'expérience chez GDSE, j'espère que vous l'apprécierez ici et si personne ne l'a encore dit, bienvenue!
Dom
2
Pour tester dans IE, vous pouvez utiliser les ordinateurs virtuels
Scott Carlson
4
Si vous le diffusez sur un site Web, cela n'apportera qu'un avantage négligeable aux clients demandant une compression HTTP (qui utilise généralement gzip de toute façon).
Bob
3

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.

utilisateur60561
la source
Bienvenue chez Graphic Design SE. Notez que le demandeur a mentionné cet outil même dans la question. Non pas que cela invalide cette réponse, mais vous pouvez la mettre en perspective. Aussi, qu'entendez-vous par ajustement manuel?
Wrzlprmft
Ce n'est pas tout à fait le même outil que celui mentionné dans la question, mais il est créé par le même auteur et situé sur le même domaine. Le lien de l'auteur contient un lien vers cet outil, mais je ne l'ai pas remarqué avant de poster ma réponse. Je ne l'ai pas supprimé car il est toujours utile. Par ajustement manuel , je veux dire que j'ai décoché plusieurs cases (combiner des chemins, supprimer des identifiants) pour rendre la sortie correcte et abaissé les décimales pour améliorer encore la taille.
user60561
Comme avec SVGOMG (d'après la réponse de Dom), les économies les plus importantes semblent provenir de la désactivation de xlink, qui, en tant qu'effet secondaire, supprime complètement l'image intégrée. Évidemment, remplacer l’image par un dégradé n’est pas vraiment quelque chose que l’on attend d’un outil automatisé.
Ilmari Karonen
3

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é.

Capture d'écran SVGOMG

Dom
la source
1
En regardant l'aperçu rendu, il semble que la plupart des économies résultent du fait qu'il supprime complètement l'image intégrée. Évidemment, le remplacement du bitmap par un dégradé n'est pas quelque chose que l'on peut attendre d'un outil logiciel automatiquement.
Ilmari Karonen
1
La version non optimisée avec uniquement le dégradé n'est plus corrigée, mais si j'édite manuellement le fichier SVG d'origine pour remplacer le bitmap par le dernier <radialGradient>et, à <path>partir de mon code optimisé manuellement, SVGOMG optimise l'image résultante de 5,8 ko jusqu'à 4,02 kB (4,11 ko raffiné), et semble faire un travail assez minutieux; Je ne vois pas vraiment d'occasions manquées évidentes. (En y jouant un peu plus, j'ai remarqué qu'il lui arrivait parfois de ne pas fusionner des groupes consécutifs avec des attributs identiques. Inkscape semble parfois générer ceux-ci, par exemple en ajustant la page pour l'adapter au dessin.)
Ilmari Karonen
@IlmariKaronen merci d'avoir jeté un coup d'oeil, l'exécuter sur le SVG 22kb d'origine dans Dropbox le réduit à 3.42kb sur disque pour moi, pourquoi le mien est-il plus petit? (J'ai activé toutes les options). Cette application pourrait être la meilleure option (la plus facile / rapide) pour la plupart des cas. Je n'ai aucune affiliation avec l'application, c'est génial!
Dom
1
Examinez attentivement le contrôleur: si vous sélectionnez "Supprimer les images raster" lors de l'optimisation du fichier SVG d'origine, les ombres sur le contrôleur disparaissent complètement (car il s'agit en fait d'un fichier PNG semi-transparent incorporé). Vous pouvez réellement le voir si vous comparez la capture d'écran de votre réponse avec le fichier JPEG d'origine. La version de 4.02 ko que j'ai obtenue est plus volumineuse car elle inclut un chemin supplémentaire et un dégradé pour remplacer l'ombrage supprimé.
Ilmari Karonen
@IlmariKaronen Je pense que je vois la différence , c'est tellement léger que je ne suis pas sûr que mes yeux jouent des tours. C'est un bon point, je n'ai jusqu'à présent travaillé qu'avec des couleurs unies dans les SVG, donc je m'en souviendrai à l'avenir, merci.
Dom