Crear y exportar SVG en Illustrator e Inkscape

SVG es un formato de gráficos vectoriales escalables que pueden ser utilizados para visualizarse desde un navegador web. También es el formato nativo de los archivos de Inkscape. Estos gráficos pueden crearse directamente desde código en el HTML así como también pueden crearse en cualquier programa de diseño vectorial, como Illustrator o Inkscape.

Su uso es muy popular para íconos web, fuentes, mapas y otras opciones de visualización de datos en la web.

Mediante SVG podemos aplicar filtros y animaciones a objetos vectoriales en el navegador. La facilidad de manipular este formato nos permite trabajar con carga de datos externos desde archivos JSON y manipularlos también con CSS y Javascript. En la era de la visualización de datos estadísticos esto es muy conveniente.

Debemos tener mucho criterio al utilizar este formato ya que no tiene 100% de compatibilidad en los navegadores y su uso excesivo puede resultar en una sobrecarga del navegador.

Exportar un vector a SVG desde Illustrator

Para poder obtener un archivo en formato SVG desde illustrator, sólo tenemos que dibujar cualquier elemento vectorial y darle a guardar como > .SVG ( en vez de .ai).

Veamos aquí las opciones que salen por defecto:

Exportar múltiples SVG usando arboards en Illustrator

Si estamos realizando por ejemplo un set de íconos y necesitamos exportarlos cada uno como un SVG por separado, cuando le damos a guardar como (save as) svg, tildamos la casilla “use artboards”, y nos creará un archivo SVG por cada artboard presente en el archivo de Illustrator.

Optimizar un SVG en Illustrator

Como el archivo SVG luego deberíamos poder leerlo desde un HTML por ejemplo, es importante que seamos organizados con el archivo desde Illustrator para que al exportar no haya código innecesario.

• Agrupa elementos en Illustrator sólo si esto implicaría algún uso práctico en el HTML, el código SVG agrega una etiqueta <g> a los elementos agrupados.
  
• Nombra las capas y los elementos de ésta en el archivo de illustrator para poder identificar cada elemento luego desde el HTML.
  
• Evita usar efectos que necesiten de un proceso de rasterización, ya que se perdería el sentido de utilizar este formato. Luego podés agregarle efectos SVG a los gráficos directamente en el HTML (o en el mismo Illustrator en Effect > SVG Filters) evitando así que los elementos se rastericen.
  
• Evita usar pinceles artísticos o vectores muy complejos.
  

El formato SVG

Si abrimos directamente el SVG en cualquier editor de código podemos ver cómo se constituye un archivo SVG.

Código :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg 
version="1.1" 
id="icono-avion" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px"
y="0px" 
width="255px" 
height="255px" 
viewBox="0 0 255 255" 
enable-background="new 0 0 255 255" 
xml:space="preserve"
>

<
circle id="fondo-circulo_1_" 
fill="#FF0086" 
cx="127.5" 
cy="127.5"
 r="93.6"
/>
<
path id="avion" 
fill="#FFFFFF" d="C7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8
l-3.3,37l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
/>
</svg>

Circle y path son los elementos vectoriales de mi archivo. En path los datos del trazado están indicados mediante d="M.....z'".

Optimizar la exportación de SVG en Illustrator

Podemos optimizar este código para poder trabajar más cómodos en el HTML.

En Illustrator al exportar tenemos las siguientes opciones:

• CSS Properties - style elements: esta opción separará las propiedades CSS de los elementos en sus respectivas etiquetas dentro de style.
  
  
• Textpath: si utilizamos texto en el SVG, en el código resultante el texto estará dentro de las etiquetas <textPath> y mediante estas podemos manipularlas con CSS así como también lograr identificar de manera más sencilla los tipos de elementos en el código.
  
  
• Responsive: con esta opción lograremos que el SVG se comporte de manera líquida en el navegador.
  

Para el ejemplo utilizaré la opción de CSS properties - style elements.

Código :

<style type="text/css">
   .st0{fill:#FF0086;}
   .st1{fill:#FFFFFF;}
</style>
<circle 
id="fondo-circulo_1_" 
class="st0" 
cx="127.5" 
cy="127.5" 
r="93.6"
/>
<path 
id="avion" 
class="st1" d="M119.4,106.3c0,0-0.9-32.7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8l-3.3,37   l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
/>

Si nos fijamos bien, ahora al exportar con la opción style elements a cada objeto se le agregó una clase, .st0 y .st1 con las propiedades de cada elemento por separado dentro de las etiquetas style.

Ahora el código está más organizado. Cada elemento tiene un ID heredado del nombre de la capa a la que corresponde en el archivo de Illustrator, y sus propiedades de color, relleno, borde, etc… están todas agrupadas en cada clase CSS asignada a cada elemento.

Crear un SVG desde Inkscape

En Inkscape también podemos crear un SVG, de hecho el SVG es el formato nativo de Inkscape. Para asignarle nombres a cada parte de nuestro gráfico vamos a Object > object properties y luego darle SET, que no se te olvide



Luego le damos Save as > Plain .svg, porque el SVG por defecto nos deja como resultado un código larguísimo! Igualmente el código que nos genera es menos limpio que el que nos deja Illustrator. Siempre podemos entrar al código e ir quitando las líneas innesesarias para que pese menos y sea más legible a la hora de trabajar.



Como ven desde Inkscape la cosa es un poco más rústica y no tenemos opciones de exportación, por lo que si queremos organizar aparte los estilos debemos hacerlo a mano:

En ese caso buscamos donde diga style en cada objeto:

Código :

style="fill:#ffffff;fill-opacity:1;stroke:none" 

Y lo quitamos y al pasarlo a CSS en el HTML nos quedaría así:

Código :

<style type="text/css">
#estrella{
fill:#ffffff;
}
</style>

Fíjense cómo optimicé inclusive los estilos ya que al exportar se agregaron propiedades innecesarias.

Cómo insertar un SVG dentro de un documento HTML

Tenemos dos maneras de insertar un SVG dentro del HTML, una es dentro de la etiqueta img y la otra es insertar el elemento SVG directamente en el código HTML.

Código :

<body>
   <img src="icono-avion.svg" alt="icono de un avion">
</body>

De esta manera el SVG será tratado como un elemento de imagen, por lo cual no podremos acceder a sus partes ni podremos manipularlas.

Insertar el elemento SVG en el código HTML

Sólo tenemos que copiar del código todo lo que incluye la etiqueta SVG del código que nos deja el archivo exportado de Illustrator y lo pegamos en nuestro HTML. Recuerda que debes pegar los estilos CSS entre las etiquetas HEAD o ponerlos en un archivo CSS aparte y linkearlo en el HTML.

Código :

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   .st0{fill:#FF0086;}
   .st1{fill:#FFFFFF;}
</style>
</head>
<body>
   <svg 
version="1.1" 
id="icono-avion" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px"
y="0px" 
width="255px" 
height="255px" 
viewBox="0 0 255 255" 
style="enable-background:new 0 0 255 255;" 
xml:space="preserve"
>

      <circle 
         id="fondo-circulo_1_" 
         class="st0" 
         cx="127.5" 
         cy="127.5" 
         r="93.6"
      />
      <path 
         id="avion" 
         class="st1" 
         d="M119.4,106.3c0,0-0.9-32.7,8.2-32.7c9.1,0,8.6,33.2,8.6,33.2l40.9,34.6l1.7,10.8l-43.2-25.8l-3.3,37
         l12.1,13.6l0.3,4.1l-16.8-4.1l-17.5,4.1l0.4-4.1l13.2-13.6l-4.4-37l-43.4,23.2l1.9-8.2L119.4,106.3z"
      />
   </svg>
</body>
</html>

Recuerda identar el código de manera que te sea más útil y ordenado para trabajar. De esta manera nos mantenemos independientes del archivo SVG que nos dejó Illustrator, o sea, ya no lo necesitamos más porque ahora con el código estamos dibujando directamente en el HTML.

Si quisiéramos cambiarle el color al ícono por ejemplo, sólo tenemos que modificar el estilo CSS.

Código :

.st0 {
   fill:  #35C612;
   }

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.