SVG (2)

Simplificar una imagen hecha con Inkscape

Las imágenes SVG se pueden crear escribiendo las etiquetas directamente en un procesador de textos (como Visual Studio Code), pero también se pueden utilizar editores gráficos como Inkscape o descargar de repositorios como Open Clip Art. El inconveniente de utilizar imágenes creadas con Inkscape es que Inkscape genera más código del necesario, por lo que a menudo conviene simplificar ese código.

Como ejemplo, si creamos con Inkscape la imagen de la estrella de los ejemplos anteriores y la guardamos como SVG plano, obtendríamos un código fuente similar a este:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 47.098932 43.986142"
   height="166.24683"
   width="178.0117">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-29.104793,-97.353467)"
     id="layer1">
    <path
       transform="matrix(0.18778215,0.59794988,-0.61065612,0.18387486,103.16359,70.246888)"
       id="use3717"
       d="M 86.178573,89.113093 67.232722,103.35429 74.82756,125.90309 55.428784,112.28529 36.33054,126.47637 43.287288,103.8189 23.889086,90.040679 47.587368,89.655397 54.696864,66.948905 62.386461,89.368253 Z"
       style="fill:#ffff00;stroke:#ff0000;stroke-width:2.92960906;stroke-miterlimit:4;stroke-dasharray:none" />
  </g>
</svg>

Para simplificar una imagen SVG podemos:

• utilizar la aplicación web SVGOMG (el tamaño y calidad del resultado depende de las opciones elegidas).

  En el caso de la imagen de la estrella hecho con Inkscape, SVGOMG produciría el siguiente resultado:

  <svg xmlns="http://www.w3.org/2000/svg" width="178" height="166.2" viewBox="0 0 47.1 44">
    <path fill="#ff0" stroke="red" stroke-width="2.9"
      d="M86.2 89.1l-19 14.3 7.6 22.5-19.4-13.6-19 14.2 6.9-22.7L23.9 90l23.7-.3 7.1-22.8 7.7 22.5z"
      transform="matrix(.18778 .59795 -.61066 .18387 74 -27.1)"/>
  </svg>
  

• utilizar la aplicación de escritorio SVGCleaner (disponible para Windows, Linux y Mac):

  En el caso de la imagen de la estrella hecho con Inkscape, SVGCleaner produciría el siguiente resultado:

  <svg xmlns="http://www.w3.org/2000/svg" height="166.2" viewBox="0 0 47.1 44" width="178">
    <path d="m86.2 89.1-19 14.3 7.6 22.5-19.4-13.6-19.1 14.2 7-22.7-19.4-13.8 23.7-.3 7.1-22.8 7.7 22.5z"
      fill="#ff0" stroke="#f00" stroke-width="2.9" transform="matrix(.2 .6 -.6 .2 74.1 -27.2)"/>
  </svg>
  

• hacerlo a mano con un editor de texto plano. Se pueden conseguir ficheros más pequeños que con SVGOMG o SVGCleaner, pero invirtiendo mucho más tiempo.

  Para insertarla en un documento html 5 es necesario eliminar parte de este código:

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg
      xmlns:dc="http://purl.org/dc/elements/1.1/"
      xmlns:cc="http://creativecommons.org/ns#"
      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns="http://www.w3.org/2000/svg"
      id="svg8"
      version="1.1"
      viewBox="0 0 47.098932 43.986142"
      height="166.24683"
      width="178.0117">
    <defs
        id="defs2" />
    <metadata
        id="metadata5">
      <rdf:RDF>
        <cc:Work
            rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type
              rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
        transform="translate(-29.104793,-97.353467)"
        id="layer1">
      <path
          transform="matrix(0.18778215,0.59794988,-0.61065612,0.18387486,103.16359,70.246888)"
          id="use3717"
          d="M 86.178573,89.113093 67.232722,103.35429 74.82756,125.90309 55.428784,112.28529 36.33054,126.47637 43.287288,103.8189 23.889086,90.040679 47.587368,89.655397 54.696864,66.948905 62.386461,89.368253 Z"
          style="fill:#ffff00;stroke:#ff0000;stroke-width:2.92960906;stroke-miterlimit:4;stroke-dasharray:none" />
    </g>
  </svg>
  

  Por lo que la imagen podría quedar así:

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 47.098932 43.986142" height="166.24683" width="178.0117">
    <g
      transform="translate(-29.104793,-97.353467)"
      id="layer1">
      <path
        transform="matrix(0.18778215,0.59794988,-0.61065612,0.18387486,103.16359,70.246888)"
        id="use3717"
        d="M 86.178573,89.113093 67.232722,103.35429 74.82756,125.90309 55.428784,112.28529 36.33054,126.47637 43.287288,103.8189 23.889086,90.040679 47.587368,89.655397 54.696864,66.948905 62.386461,89.368253 Z"
        style="fill:#ffff00;stroke:#ff0000;stroke-width:2.92960906;stroke-miterlimit:4;stroke-dasharray:none" />
    </g>
  </svg>
  

  Ese código se puede simplificar todavía más, hasta obtener el código que se ha utilizado en esta lección:

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
        width="170" height="165" viewBox="0 0 170 165">
    <polygon fill="yellow" stroke="red" stroke-width="7"
      points="129,150 85,119 41,150 57,104 15,66 68,66 85,15 102,65 156,66 113,98" />
  </svg>