Alex Plaza

UX & Front-end Developer

SVG's y el futuro de la web

SVG: un formato que no se pixela

Cuando conocí illustrator y los vectores, me enamoré de inmediato de ellos. La posibilidad de crear una composición que pudiese luego replicarse en un aviso publicitario de cualquier tamaño sin perder su calidad era sin duda algo poderoso.

Luego de eso, vino la web. Hacía perfecto sentido usar vectores para mostrar composiciones que no se pixelan en ninguna pantalla. El HD y las pantallas retinas ya no serían un problema, los vectores habían llegado para salvarnos. Pero cuando escuché la idea de usar inline svg’s para la web me costó mucho más digerirla. Los SVG inyectados directamente en el html implicaban un código sucio y podían aumentar rápidamente la cantidad de scroll que tienes que hacer cuando estás buscando algo en tu código. No estaba convencido.

Note: SVG stands for Scalable Vector Graphics, and it’s one of the best formats to display vector on the web.

Time will proof everything

Con el tiempo, comencé a crear diferentes composiciones basadas en SVG’s en Codepen, solo para ir probando esta nueva moda que se apoderaba de la web. Y tengo que decir que me terminó convenciendo la flexibilidad de los vectores en la web, y lo entretenido que puede ser manipularlos usando solo CSS.

Cuando hablo de la flexibilidad quiero decir que los SVG’s son uno de los mejores formatos para trabajar en un escenario totalmente responsivo, como lo es la web hoy en día; Y cuando digo que puede ser muy entretenido manipular SVG’s con CSS me refiero a que puedes, no solo pintar los vectores a gusto, sino que puedes animarlos completamente, o a cada una de sus partes por separado! It’s amazing!

Nota: y cuando digo CSS me refiero a Sass / SCSS

SVGAA: Scalable Vector Graphics Are Amazing

Para saborear un poco de lo Amazing del SVG en HTML vamos a hacer algunas demostraciones, y todo comienza con un programa de ilustración o editor de vectores que nos permita exportar nuestras composiciones en .svg. En mi caso usaré Sketch, y si tienen un equipo Mac se los recomiendo plenamente. También pueden usar Illustrator.

Nota: Los programas de edición vectorial para Linux son una basura. There, I said it

En esta tremenda herramienta que es Sketch tenemos la posibilidad de trabajar con vectores de una manera muy cómoda para su posterior manipulación en HTML. Sketch nos permite nombrar los distintos trazos o grupos de trazos directo en la interfaz de capas y cuadros de trabajo; luego estos nombres aparecerán como id’s en la exportación a svg que realicemos.

Primero vamos a revisar las lineas básicas que nos permiten crear figuras. Éstas se identifican con los tags line o path, dependiendo del programa que utilices. <line> es utilizado por Illustrator para identificar lineas rectas en cualquie ángulo, y <path> para líneas curvas. Sketch crea todo como <path> ya sea curva o recta, es menos semántico y quizá se deba a la edad temprana del programa, donde no han corregido este detalle. Bueno, vamos a crear esas líneas.

Así creamos las líneas en sketch, super simple

lineas básicas en Sketch

Acá le damos nombres a esas líneas

nombrando a las lineas en Sketch

Y por último exportamos nuestro cuadro de trabajo “vectores” en svg

exportando vectores en Sketch

Y este es el contenido del archivo .svg al abrirlo en nuestro editor de texto.

<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

    <g id="vectores" sketch:type="MSArtboardGroup" stroke="#979797">
        <path d="M55.411779,61.3115634 L213.221119,61.3115634" id="lineaRecta" sketch:type="MSShapeGroup"></path>
        <path d="M53.9764886,124.879318 L132.441568,172.917764 L216.36608,123.18895" id="quiebre" sketch:type="MSShapeGroup"></path>
        <path d="M59.9879568,228.863631 C59.9879568,228.863631 164.649935,281.847546 222.339477,226.6593" id="lineaCurva" sketch:type="MSShapeGroup"></path>
    </g>

</svg>

Si realizan el ejercicio, quizá noten que elimininé algunos tags que nos generó Sketch de forma un poco.. desordenada, más formalidades semánticas y de accesibilidad como titulo y descripción de la composición. Lo que nos interesa por ahora es el grupo <g> que nos generó Sketch con el ID “vectores” que es nuestro cuadro de trabajo que nombramos así antes de exportar. Y también nuestros trazos <path> con los ids: lineaRecta, quiebre, lineaCurva. Todos los otros datos no son de nuestro interés por ahora, y los atributos numéricos en los <path> sirven para que el navegador sepa donde poner las líneas en el cuadro de trabajo de 300 x 300. Tampoco vienen al caso.

Ahora veámos algunas figuras geométricas.

figuras geométricas básicas en svg

Y aquí tenemos el código que las crea.

<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

    <g id="figuras" sketch:type="MSArtboardGroup" stroke="#979797" fill="#D8D8D8">
        <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="49" y="45" width="62" height="62"></rect>
        <circle id="Oval-1" sketch:type="MSShapeGroup" cx="218.5" cy="114.5" r="37.5"></circle>
        <polygon id="Triangle-1" sketch:type="MSShapeGroup" points="104 155 150 247 58 247 "></polygon>
    </g>

</svg>

Si se fijan, Sketch utiliza los tags <rect>, <circle> y <polygon>, para figuras rectangulares, ovaladas y polígonos, respectivamente. Este es un detalle semántico que nos permite diferenciar a las figuras cerradas que acabamos de crear.

Pongámosle color a la cosa. No edité los ids de las figuras que me creó Sketch y para no alargarnos más vamos a hacer uso de ellos tal cuál como están.

body {
  background: #F2EED2;
}

#Rectangle-1 {
  fill: #A0CAB5;
}

#Oval-1 {
  fill: #F38A8A;
}

#Triangle-1 {
  fill: #CDE9CA;
}

Como notarán los svg’s aceptan colores de fondo de una forma distinta a como lo hacen los divs en HTML, en vez de “background” ellos usan fill.

Y este es el resultado:

See the Pen Figuras geométricas - Blog de Alex by Alex Plaza (@klangwiedergabe) on CodePen.

El background del body es un detalle simplemente, lo importante que queda por destacar es que si ponen atención a los atributos dentro de los tags verán que el grupo de figuras que nos creó Sketch, así como las figuras mismas, tienen una serie de atributos en línea con códigos de #COLORES, y lo que hicimos agregándole CSS a nuestra composición, fue sobre-escribir esos colores que nos dio Sketch.

En el tag <g> Sketch está dándole a todas las figuras dentro de ese grupo un borde gris. Para esto utiliza el atributo stroke. Y es el mismo nombre que deberíamos usar como propiedad de borde para nuestros SVGs en CSS. Así:

#Oval-1 {
  fill: #F38A8A;
  stroke: red;
}

Y el resultado sería:

See the Pen Figuras geométricas - Blog de Alex by Alex Plaza (@klangwiedergabe) on CodePen.

Recapitulando

  1. Los vectores son totalmente manipulables a través de css, solo debemos agregarles ids o clases en html.
  2. Los vectores pueden recibir una propiedad de fondo a través de css con fill:
  3. Los vectores pueden recibir una propiedad de borde a través de css con stroke:
  4. Los vectores son increíbles y no se pixelan, deberías usarlos.

Revisen los codepen y pinten las figuras como quieran, para que exploren el maravilloso mundo de los SVGs inyectados en HTML. Pensaba mostrarle una animación de un SVG en linea, pero el post se alargó lo suficiente como para dejarlo para otra ocasión.

¿Ven a los SVG en linea como una opción para sus próximos proyectos?

comments powered by Disqus