Blog

Guía Práctica de SVG en la web

Sin comentarios

Introducción

Vivimos en la era de los píxels. Como diseñadores y desarrolladores web, los píxels pueden ser tanto nuestros amigos como nuestros enemigos. Queremos que todo sea bonito y nítido para cualquiera que use algunos de los websites en los que trabajamos, pero debemos mantener bajos los tamaños de archivo para no afectar al rendimiento. Y no nos quedan muchas otras opciones cuando se trata de iconos, logos e ilustraciones en la web que no sean SVG. Los Scalable Vector Graphics (Gráficos Vectoriales Escalables) pueden quedar nítidos a cualquier resolución de pantalla, pueden tener tamaños de archivo súperpequeños, y pueden ser fácilmente editados y modificados.

Esta guía pretende ofrecer una visión práctica de cómo usar SVGs en tus websites, dando algunos consejos y trucos para sacarles el máximo partido.

SVG

Scalable Vector Graphics es un lenguaje de marcado (markup) basado en XML que puede contener vectores bidimensionales. Los vectores pueden ser formas simples, sucesiones de vectores (“paths”), o cualquier otra cosa que se pueda hacer en el Illustrator. Es un formato de imagen que tiene más en común con una página web que con una imagen JPEG. SVG es mucho más potente que cualquier otro formato de imagen que podamos usar en la web, ya que podemos manipularla mediante código (sea en el editor de texto o con CSS / JS).

  • Independiente de la resolución
  • Implementado en todos los navegadores modernos
  • Protegido contra cambios futuros (es un estándar del W3C)
  • Fácil de hacer y editar
  • Manipulable con CSS y JS
  • Altamente compresible

Preparación & Optimización

Preparar un SVG para usarlo en la web es un proceso simple, no más complicado que exportar un JPEG o un PNG. Trabaja como lo harías normalmente en tu editor de gráficos vectoriales preferido (Illustrator, Sketch, Inkscape [que es libre], etc [o incluso Photoshop si usas capas de formas]) con el gráfico del tamaño con el que esperes que vayas a usarlo. Explicaremos algunas cosas que hacemos en Illustrator, que es el que usamos normalmente, pero los mismos principios se aplican a cualquier software. Probablemente querrás convertir los textos a contornos, ya que lo más probable es que no se muestre en la tipografía correcta a no ser que tengas pensado darle estilo con una tipografía web que uses en la página (¡se puede hacer!). No te preocupes por expandir todos los objetos a formas sólidas, sobre todo si tienes trazos, ya que podrías querer manipularlos en la página, y normalmente expandirlos no reduce el tamaño de archivo. Los nombres que pongas en las capas o grupos se incluirán en el SVG como una ID del elemento. Esto puede venir bien para dar estilos, pero aumentará un poco el tamaño final del archivo.

Al exportar, asegúrate de que el diseño está sobre un área de píxels enteros (o sea, no 23.3px X 86.8px); sino, puede que no quede realmente nítido, y luego recorta el área de trabajo (artboard) alrededor. Puedes hacerlo en Illustrator con Object > Artboards > Fit to Artwork Bounds. Luego pulsa guardar como y elige SVG con los ajustes por defecto. Se puede hacer alguna optimización aquí, pero no vale realmente la pena, porque luego lo optimizaremos en post-proceso, y el tiempo que pasemos jugando aquí con los ajustes será perdido.

Trucos para reducir el archivo

(Ver recursos para enlaces a artículos externos)

Hay bastantes buenos artículos sobre optimización de SVG en la web, que ofrecen mucha información sobre el tema, pero me gustaría compartir unos consejos y trucos que para nosotros son los más efectivos y útiles. No suponen mucho más trabajo y pueden añadirse fácilmente a tu rutina habitual.

Para mantener los SVGs lo más pequeños posible querremos eliminar efectivamente todo lo que no sea necesario. La herramienta más conocida y (para mí) la mejor para post-procesar SVGs es SVGO. Sirve para eliminar todo el código que no se necesita — nota: recuerda ser cuidadoso al usarlo si tienes pensado manipular con CSS / JS, ya que a veces puede sobre-optimizar los archivos, haciendo más difícil hacer luego con ellos lo que habías pensado. Algo muy práctico de SVGO es que puede añadirse al proceso de trabajo para que sea automático (o se puede usar un GUI para hacerlo uno mismo, si se prefiere).

Dando un paso más en lo de ‘eliminar todo lo innecesario’, podemos hacer algo más en el editor gráfico. Primero, asegurarnos de que estamos usando el menor número posible de “paths” y formas para conseguir lo que queremos, y también de que hay el menor número posible de puntos en los “paths”. Se trata de combinar y simplificar todo lo que se pueda, y luego eliminar el mayor número posible de puntos de los “paths”. VectorScribe es un plugin de Illustrator que incluye Smart Remove Brush Tool (Pincel de Eliminación Inteligente), que permite eliminar puntos manteniendo la forma general intacta.

Luego tendremos que hacer zoom. Con Illustrator habilitaremos Pixel Preview con View > Pixel Preview, y miraremos dónde tenemos los puntos. Para reducir el tamaño al mínimo, los puntos deben ajustarse a la parrilla de píxels (o sea, sobre valores enteros de píxel). Lleva algún tiempo engancharlos y recolocarlos, pero vale la pena este pequeño esfuerzo añadido, ya que esto también nos asegura la reproducción más nítida posible (recuerda que es posible que antes te hayan quedado algunas zonas a medio píxel).

Si hay dos (o más) formas alineadas, podemos eliminar las áreas solapadas. Una cosa que hay que vigilar es que a veces queda una línea blanca entre ellas, aunque los “paths” estén alineados, así que a veces hay que solaparlas un poco para evitarlo. Nota: en SVG el índice z se define por el orden en que aparecen en el código, siendo el de más abajo el que está encima, así que hay que poner las formas de encima más abajo en el código.

Último pero no menos importante, una cosa que se suele olvidar, recuerda habilitar la compresión gzip para SVGs en tus websites en el archivo .htaccess.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

Opciones de implementación

A la hora de usar SVGs en la web, hay varias formas de trabajar. Algunas ofrecen beneficios que nos pueden ser útiles dependiendo del resultado que queramos, y otras será mejor evitarlas. Si queremos atenernos a lo básico para lograr los beneficios de independencia de resolución y pequeño tamaño de archivo, podemos referenciar el SVG en un img o como background-image en CSS, igual que haríamos con cualquier otro formato de imagen.

Como haríamos con cualquier otra imagen. También se pueden usar SVGs en un elemento <picture>. Nótese que este método limita las funcionalidades de manipulación.

<img src="logo.svg" alt="Logo" height="65" width="68">

Background-image

Es mejor no codificarlos con base64, ya que se bloqueará la carga del resto de estilos mientras se descarga. Nótese que este método limita las funcionalidades de manipulación.

.logo {
  background-image: url(logo.svg);
}

Iframe

Se pueden cargar SVGs en un <iframe>. Esto permite hacer la mayoría de las cosas, pero no estoy seguro de que sea el mejor método si queremos avanzar ¯\_(ツ)_/¯.

<iframe src="logo.svg">Your browser does not support iframes</iframe>

Embed

<embed> está pensado para integrar ‘una aplicación externa’ o ‘contenido interactivo’. Se puede usar para SVGs, pero es preferible no hacerlo.

<embed type="image/svg+xml" src="logo.svg" />

Object

<object> es la mejor opción si queremos poder manipular un SVG sin tener que ponerlo inline en el HTML.

<object type="image/svg+xml" data="logo.svg">Your browser does not support SVGs</object>

Inline

Poner el código SVG inline ahorrará una solicitud HTTP, pero la imagen no quedará en la caché del navegador. Es la forma más fácil para manipular, pero mantener código SVG inline puede ser una lata.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 294.44 171.45">
<defs>
<linearGradient id="linear-gradient" y1="85.73" x2="294.44" y2="85.73" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ef573d"/>
<stop offset="1" stop-color="#ec2227"/>
</linearGradient>
</defs>
<path d="M282.17,0H12.28A12.28,12.28,0,0,0,0,12.29V117.15a12.28,12.28,0,0,0,12.28,12.29H68.76l18.82,42v-42H282.17a12.28,12.28,0,0,0,12.28-12.29V12.29A12.28,12.28,0,0,0,282.17,0Z"/>
</svg>

Para concluir

Si quieres sacar el máximo partido a tus SVGs, usa <object>. Alternativamente puedes meterlo inline para ahorrar solicitudes HTTP, pero no se almacenará en caché. Si sólo quieres usar SVGs como lo harías con cualquier otra imagen, usa <img> o background-image. También es posible usar <iframe> y <embed>, pero no creo que sean las mejores opciones a seguir (y acorde con los propósitos de este site, no trataré más sobre ellas).

 ObjectInlineImgBackground-image
Manipulación CSSAlgunas inlineAlgunas inline
Manipulación JSNoNo
Animación SVG
Animación SVG InteractivaNoNo

Nota: ‘Algunas inline’ significa que algunas funcionan, pero sólo si el <style> CSS está incrustado dentro del código del SVG. Más información en la sección siguiente.

Manipulación CSS

Una de las grandes cosas de usar SVG es que podemos cambiar los estilos de los elementos internos usando nuestro querido viejo CSS. Por ejemplo, tenemos un icono naranja, y queremos que sea azul en algunas páginas; podemos hacerlo sin tener que hacer un nuevo icono azul. Ideal.

Hay dos formas de cambiar estilos: inline en el SVG, y externamente (o sea, sin nuestra hoja de estilo). Para poner los estilos inline, hay que incluirlos dentro de una etiqueta <style> y también dentro de <![CDATA[ ... ]]>. Es mejor hacerlo así, porque a veces los parsers de XML pueden tener conflictos con ciertos caracteres (por ejemplo: >). Y aunque ahora no tengamos ningún caracter extravagante por ahí, la mejor práctica es usar CDATA, porque se podría añadir alguno más tarde y descomponerlo todo.

Los estilos inline funcionarán en la mayoría de implementaciones. <img> y background-image no soportan animaciones CSS3 aunque estén inline (ver más en la sección animaciones). background-image no soporta media queries inline (ver más en sección media queries ).

Estilos inline

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0 { fill: #000; }
.st3 { fill: #fff; }
]]>
</style>
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Si se quieren usar estilos externos, con los que habitualmente es más fácil trabajar y son más fáciles de mantener, no se puede usar <img> ni background-image. Si se usa <object>, necesitamos referenciar la hoja de estilo internamente desde el archivo SVG (ver el código más abajo). Recuerda: si lo haces así, el SVG no podrá saber cuál es su clase heredada (o sea, el <object>), así que no intentes hacerlo así para definir estilos. Los SVGs inline no necesitan incluir esto y por lo tanto es algo más fácil trabajar con ellos en este sentido.

Estilos externos

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.st { fill: #000; }
.st1 { fill: #fff; }

Manipulación JS

Sólo apuntaremos algunas pistas básicas sobre cómo usar JS para cambiar cosas en un SVG. Si quieres incrustar los scripts dentro del archivo SVG, recuerda incluirlos entre <![CDATA[ ... ]]>, también para evitar errores de parsing. Los scripts no se ejecutarán si se usa <img> o background-image como medida de seguridad (esto es, para prevenir la ejecución de código potencialmente malicioso en la página).

Al trabajar con JS externo (o sea, no incrustado en el archivo SVG), si tenemos el SVG inline, podemos apuntar a él como haríamos con cualquier otro elemento DOM. Si se usa un <object> podemos apuntar a él con contentDocument. Se puede ser mucho más creativo, pero aquí dejo un ejemplo:

Scripts externos

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("st");
  var svgb2 = svgDocument.getElementsByClassName("st1");
  svgb1[0].setAttribute("fill", "#000");
  svgb2[0].setAttribute("fill", "#fff");
};

Anchura fija vs adaptatividad

Cuando se usan imágenes en la web en diseños adaptativos, hay dos opciones para darles estilo: se pueden mantener con tamaño fijo y ajustar para los puntos de cambio (breakpoints) si es necesario; o dejar que se redimensionen con la página dependiendo de su container correspondiente.

Si son de tamaño fijo, con lo único que hay que tener cuidado es que si usamos el SVG como background-image hay que asegurarse de incluir un background-size, porque los navegadores se pueden confundir y pueden o cortar la imagen o encogerla, especialmente si la imagen se muestra con un tamaño distinto del original.

Animación

Cuando se trata de animar SVGs, hay una pocas opciones que podemos usar: animación SVG (basada en la especificación SMIL), animaciones CSS3, o animaciones JS. La animación SVG y las animaciones CSS3 permitirán hacer la mayoría de las cosas que queramos, siendo la animación SVG ligeramente más potente al tener control sobre algunas cosas más. JavaScript permite hacer animaciones bastante complejas de forma relativamente fácil, especialmente con bibliotecas como Snap.svg. La animación SVG es súper potente. Puedo imaginar que será útil para ilustraciones que nos gustaría que incluyesen alguna bonita animación, pero, desde un punto de vista práctico, no todos los proyectos disponen de tiempo o de presupuesto para invertir en esto. Pero si lo haces, realmente es muy fácil empezar a jugar con esto, y hay algunos tutoriales estupendos online. Básicamente, se añade un elemento hijo de <animate> a cualquier “path” o forma de los SVGs, que controlarán la animación. Y lo mejor es que funciona con cualquier método de implementación. Internet Explorer no soporta animación SVG; pero se puede usar un polyfill, como FakeSmile si necesitas que funcione en IE también.

A menudo, cuando queremos animar un icono o una ilustración en la web, tendrá que ver con una interacción, por ejemplo, al pasar por encima, etc. Esto entraría en las categorías Manipulación CSS y Animación SVG Interactiva en la tabla de competencias de arriba, y por tanto no funciona con animación SVG ni con animaciones CSS3 si se usa <img> o background-image. Para conseguir animaciones interactivas con animación SVG podemos añadir begin="mouseover" y begin="mouseout", y con animaciones CSS3 como se haría en cualquier otro sitio: añadir clases a los elementos del SVG y darles estilo en hover. Una cosa a tener en cuenta es que si queremos dar estilo a las animaciones desde la hoja de estilo externa, funcionará como esperamos si tenemos el SVG inline, pero si usamos <object>, necesitaremos referenciar la hoja de estilo externa desde dentro del SVG también.

Animación SVG interactiva

Sólo funciona con <object> o inline.


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>


<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
<g opacity="0">
<animate attributeName="opacity" to="0.3" begin="anchor.mouseover" dur="0.5" fill="freeze"/>
<animate attributeName="opacity" to="0" begin="anchor.mouseout" dur="0.5" fill="freeze"/>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)" />
</g>
<a id="anchor">
<rect x="0" y="0" width="300" height="220" fill-opacity="0"/>
</a> </svg>

Animación CSS3

Sólo funciona con <object> o inline. También funciona con CSS externo, como se explicó arriba.


<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0 { fill: #000; transition: fill 0.1s; }
.st3 { fill: #fff; transition: fill 0.1s; }
.st3:hover { fill: red; }
]]>
</style>
<defs>
<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
</linearGradient>
</defs>
<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
H180.2z" fill="#fff"/>
<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Uso como sprites

Se pueden crear y usar sprites SVG igual que hacemos habitualmente con PNGs y background-image para tener beneficios de resolución, o podemos dar un paso más y usar la potencia extra que tenemos con SVG. El beneficio es que obtenemos toda la potencia del SVG con menos solicitudes HTTP.

Hay dos posibles aproximaciones. En la primera, definimos todos los iconos dentro de los elementos <symbol> del SVG, pero los ocultamos. Luego referenciamos cada uno cuando se necesiten con un elemento <use> que referencie el <symbol> con xlink:href="#id". La segunda aproximación usa el atributo viewbox del SVG para recortar el área “artboard” (el área del SVG que se muestra) alrededor de una cierta zona. Ambos son usos bastante avanzados de SVG, así que sólo deberíamos preocuparnos de ellos si los vamos a usar.

Si quieres aprender a usar estas técnicas, echa por favor una ojeada a los enlaces de recursos, especialmente el artículo de Sara Soueidan’s en 24ways .

Si se quiere usar un sprite SVG como se haría con un sprite PNG con CSS, debemos indicar que es necesario añadir los atributos width y height junto al atributo viewBox en el código del SVG. Durante el proceso de optimización se suelen eliminar, porque normalmente no se necesitan. En este caso, sin embargo, IE9 y 10 los necesitan para poder recortar correctamente parte de la imagen del sprite. La razón es que estos navegadores cogen el ancho y alto especificados en el CSS para el tamaño de imagen, pero estos son en realidad los tamaños de la parte de la imagen que se necesita (no de toda la imagen). Confuso, ya lo sé, pero es algo con lo que me encontré recientemente.

Media queries

Una cosa realmente chula de SVGs es que si se usan media queries en los estilos incrustados en el archivo, en lugar de trabajar desde el tamaño de viewport, trabajarán desde el tamaño de viewport del SVG. Esto significa básicamente que se traen de fábrica su propia implementación de trabajo de los elementos de las queries. Qué bueno. Esto nos permite controlar cómo se verá el SVG sea cual sea el tamaño.

Imagina que eres una gran marca y quieres que tu logo se use correctamente independientemente del tamaño en que se muestre. Bueno, pues desde luego que se puede hacer. Sólo hay que incrustar algunas media queries y se puede cambiar su formateo basándose en el tamaño en que se está mostrando. Esto funciona con todas las implementaciones menos background-image, y en todos los navegadores (nota: IE9–11 parece ignorar algunos puntos de cambio (breakpoints)). Puedes jugar con el deslizador de abajo para ver un ejemplo de cómo funciona:

Contingencias

Unas palabras sobre contingencias. SVG está soportado en todos los navegadores modernos. Si aun tienes que dar soporte a IE8, entonces tendrás que implementar contingencias, más probablemente en forma de PNGs. No me extenderé mucho en esto, porque probablemente ya no deberías estar dando soporte a IE8 ¯\_(ツ)_/¯. De todas formas, si quieres disponer de contingencias, básicamente las cosas se complican mucho y muy rápido, como suele ocurrir con SVG. Recomendaría leer este artículo exhaustivo de Amelia Bellamy-Royds en CSS-Tricks.

Vía: https://svgontheweb.com/

Jesús QuintanaGuía Práctica de SVG en la web
leer más

Profesionalizar el Plan de Marketing (Online)

Sin comentarios

Una de las mayores amenazas a las que las organizaciones pueden enfrentarse es cuando sus directivos tienen la “presunción” de considerarse expertos y muy conocedores del mercado en el que operan.

El diseño de un plan de marketing implica un análisis exhaustivo de nuestro entorno, de nuestro mercado, de nuestra competencia, de los clientes que aspiramos conseguir, y de nuestra propia organización y sus recursos.

Estas tareas se tienen que realizar con mucha profundidad y sobre todo, con muchísima humildad.

  • Las “buenas” organizaciones conocen a fondo su competencia y escuchan constantemente la voz de sus clientes, tratándolos como los “prosumidores” que son. Están abiertas y son flexibles.
  • En las “malas”, la asignatura de benchmarking NO preocupa y la experiencia e incluso la existencia (!) del cliente, tampoco.

Sólo conociendo a fondo las necesidades, la dimensión, la ubicación y las motivaciones del mercado que vamos a atender podremos planificar una oferta exitosa.

Por esto, una buena investigación es clave para tener éxito y diseñar nuestro plan comercial sobre una sólida base.

Einstein decía que: “En los momentos de crisis, sólo la imaginación es más importante que el conocimiento”

Jesús QuintanaProfesionalizar el Plan de Marketing (Online)
leer más

Cómo convertir los datos de Analytics en acciones: Big Data y Analytics

Sin comentarios

Hoy más que nunca, la analítica de datos nos muestra el camino para determinar las mejores operaciones. Hay quienes lo llaman “actalytics” (conjugación de los términos “action” y “analytics”) ya que, de lo que se trata, en realidad, es de convertir los datos en acciones reales. Pero, ¿cómo puede una empresa extraer el máximo partido al analytics, qué mitos conviene desterrar en torno a ese concepto y qué recomendaciones podemos adoptar? Sólo en la redes sociales existen hoy más de 2 mil millones de usuarios que generan cada día un billón de contenidos en Facebook, y más de 500 millones de tuits en twitter. Y es que en España somos grandes usuarios de smartphones, ya que ocupamos el primer lugar de Europa por cuota de penetración, con más de un 82% de mercado; la gran mayoría de estos dispositivos cuentan con conexión a internet y con numerosas aplicaciones de todo tipo. Igualmente, el alcance de los llamados “wereables” (dispositivos “ponibles”) no cesa de crecer: la consultora Gartner prevé que en 2020 coexistan nada menos que 30 mil millones de dispositivos conectados a la red. Sin apenas darnos cuenta, todos y cada uno de nosotros vamos dejando un rastro de información a nuestro paso que queda registrado en la red digital. Nos rodean todo tipo de tecnologías sensoras y captoras de datos (desde cookies a sondas de id), y esto no ha hecho nada más que empezar. La generación de datos va a crecer todavía más. En suma, las organizaciones necesitan entender a sus clientes para conservarlos y seguir siendo competentes en un entorno digital en el que la voz cantante la tienen, ahora y para siempre, los clientes, gracias a las redes sociales. Ante este intrincado panorama, las estrategias de marketing tradicional ya no sirven. La solución pasa por conocer a ese nuevo consumidor. En un mercado ultracompetitivo, donde se generan más de 2,5 trillones de bytes de datos al día, el analytics será fundamental para averiguar las mejores estrategias y garantizar la rentabilidad empresarial. Ello implica el uso de Big Data y el Analytics, contemplando desde la recopilación de datos, su análisis y gestión hasta la procesamiento en data intelligence, una información de gran valor que ejercerá como guía para tomar las decisiones más acertadas en el momento preciso.

“Actalytics”

Hablamos de eficacia y eficiencia a la hora de procesar y entender cientos de miles de datos en forma de columnas, filas, combinaciones y múltiples variables y formatos, porcentajes, sesiones…, etc, etc. Por eso, ¿Cómo diferenciar lo importante de lo que no lo es? Es aquí donde interviene el analytics, lo que podríamos llamar como la compresión e interpretación de datos en el mundo digital en que vivimos, o, comprender para actuar. El analytics le proporciona al márketing una visión global de los consumidores, ya que contempla la gestión, la medición y el análisis de todos los procesos con el fin de obtener la máxima eficacia de cada acción, optimizar los resultados y asegurar el “ROI” (“Return On Investment”, Retorno de la Inversión).

Las múltiples dimensiones del Big Data y la Analítica

El gran manejo de datos al que todas las compañías se ven abocadas genera un incomparable valor en múltiples sectores. La Big Data Value Associationhttp://www.bdva.eu entidad cuyo objetivo es impulsar el valor de la investigación, desarrollo e innovación del Big Data en Europa, sitúa este fenómeno mundial en varias dimensiones:

  • Datos: Hay una amplia gama de tipos y fuentes de datos: datos estructurados y no estructurados, datos multilingües, datos generados por máquinas y sensores, datos estáticos y datos en movimiento. El valor se agrega por el pre-procesamiento, validación y garantía de la integridad y exactitud de los datos.
  • Habilidades: Con el fin de aprovechar el potencial del valor de los datos, un desafío clave es garantizar la disponibilidad de personas altamente cualificadas con un excelente dominio de las mejores prácticas y tecnologías en la entrega de grandes volúmenes de datos dentro de las aplicaciones y soluciones. Habrá la necesidad de científicos e ingenieros con experiencia en análisis, estadística, aprendizaje automático, minería de datos y gestión y análisis de datos. Tendrán que ser combinados con otros expertos con la capacidad de aplicar estos conocimientos para la generación de valor.
  • Legal: El aumento de la importancia de los datos intensificará el debate sobre la propiedad de los datos y su uso, la seguridad y la responsabilidad.
  • Técnica: Aspectos clave tales como el análisis en tiempo real, escalabilidad en el procesamiento de datos, nuevas y ricas interfaces de usuario y vinculación de datos, información y contenido; debe avanzarse para abrir nuevas oportunidades y para mantener o desarrollar ventajas competitivas. La interoperabilidad de los conjuntos de datos y soluciones basadas en datos, así como los enfoques analíticos, son esenciales para una amplia adopción entre sectores
  • Aplicaciones: Desarrollo y validación de aplicaciones y soluciones novedosas en los ecosistemas que proporcionan la base para la creación de de datos de valor para las empresas.
  • Negocio: El uso más eficiente del Big Data, análisis y compresión de datos como activo tiene un gran potencial para la economía y la sociedad.

Algunos mitos

El 73% de las compañías encuestadas por Gartner afirmaba que había invertido en Big Data o tenía pensado hacerlo, sólo un 13% había implementado soluciones reales en este campo. Quizá por desconocimiento de todo lo que el Big Data y el analytics implican, también se han extendido algunos mitos que hoy podemos desmentir:

  • No es barato. Los costes de un buen analizador de datos no son caros, en relación a los benecifios obtenidos.
  • La cantidad de fuentes de datos hacen complicada su gestión. En realidad, las implementaciones analíticas se simplifican.
  • Los pequeños flujos de datos apenas tienen importancia. No considerarlos puede causar impactos negativos en el conjunto.
  • No influye en la mejora de toma de decisiones. Se ha demostrado que las empresas que lo aplican elevan su productividad y elevan sus beneficios.

Recomendaciones

Con el objetivo de extraer el máximo rendimiento al analytics, consideramos que toda organización empresarial debería poner en marcha, al menos, estas tres acciones:

  • Usar una variedad equilibrada de técnicas analíticas. Para atender diferentes necesidades, tales como contemplar lo realizado hasta el momento, estudiar el presente y predecir los comportamientos futuros.
  • Valorar las capacidades analíticas. ¿qué capacidades de análisis e interpretación de datos tiene su empresa? ¿hay insuficiencias?
  • Actuar sobre lo aprendido. Identificar los canales, ajustar las estrategias a las necesidades y optimizar los procesos. Así:
    • Tener un objetivo claro.
    • Planificar.
    • Integrar.
    • Ser realista.
    • Ser multifuncional.

Para finalizar, el Big Data y el Analytics van a ser grandes impulsores de creación de empleo durante los próximos años. Así pues, el dominio de la gestión, interpretación y análisis de datos serán cruciales para el éxito de la competencia de mercado. Sólo la combinación de datos, la tecnología y el talento humano dan como resultado un servicio de marketing online que aporte el máximo valor y rentabilidad.

Más información sobre nuestros servicios de analítica web anvanzada

Jesús QuintanaCómo convertir los datos de Analytics en acciones: Big Data y Analytics
leer más

Tendencias E-commerce para el 2016

Sin comentarios

La comodidad de comprar desde casa es una realidad. Hace algunos años sólo se compraban esos paquetes de viajes, los billetes de avión, etc. Pero lo cierto es que a día de hoy las compras online abarcan todo tipo de productos, desde ropa, muebles, artículos electrónicos, en definitiva, todo es vendible en la red.

Otra tendencia del pasado es que las compras online se hacían desde el ordenador de sobremesa. Hoy en día son cada vez más los usuarios que realizan una compra desde sus smartphones o tablets. Por ejemplo, en algunos países como Estados Unidos las compras a través de móviles y tablets pronto alcanzarán las realizadas desde dispositivos de sobremesa. Es por este motivo que las empresas deben adaptar los diseños de sus webs a todos los dispositivos móviles.

Por increíble que parezca, son muchas las empresas que aún no han adaptado sus tiendas online a un diseño responsive. Es más, si hablamos de microempresas y según el informe sobre la Implantación de las TIC en Pymes españolas en 2015 que ha desarrollado el ONTSI, el 70% no tienen una web propia ni ningún tipo de presencia online debido a la falta de tiempo y dinero y a que ven su inclusión en la red como un gasto y no como una inversión. – Qué equivocados están, ¿verdad?-.

Pero volviendo al proceso de adaptación de las que sí tienen web, debemos destacar la navegabilidad y usabilidad, que ha de ser cómoda y práctica para el usuario y que así no se vaya al portal de la competencia. De esta forma queda claro que el camino correcto está en mejorar la experiencia de compra del usuario en cualquier dispositivo.

Un dato que confirma la necesidad de optimizar estos procesos de compra online y de adaptarse a las nuevas tendencias, es que cada español gastará de media 661,62 euros en compras online repartidas en una media de 21,2 compras. De hecho, el crecimiento previsto para este sector es del 18,6%, según un informe elaborado por la compañía RetailMeNot.

Algo que comienza a ser otra realidad es que cada vez se compra menos en los establecimientos tradicionales, y aunque los comerciantes pueden estar tranquilos porque mucha gente prefiere esta modalidad a la online, sí han de pensar en adaptarse a los tiempos tecnológicos que corren para evitar perder a una parte importante de la clientela. Lo propio es asegurar ambas vías para no perder oportunidades de venta.

Otra tendencia a destacar, es el e-commerce social. Cada vez son más las redes sociales que incorporan la opción de comprar a sus plataformas, como por ejemplo Pinterest con sus “buyable pins” o Facebook con sus “call to action”, que permiten añadir la opción de compra en un anuncio. Además, Facebook está realizando pruebas para que directamente se pueda comprar un producto con tan sólo un clic en el botón “buy”. Incluso Google ha insertado su botón de compra directa desde los ads de su plataforma.

Por tanto la tendencia está clara, el e-commerce se convierte en social y los smartphones serán imprescindibles en las compras por internet, otorgando al comercio móvil más protagonismo.

Paula GiaoTendencias E-commerce para el 2016
leer más

Lo que debes tener en cuenta si quieres conseguir un buen SEO

Sin comentarios

El trabajo de un SEO Manager es complicado, hacer que una web o blog aparezca en los primeros resultados de búsqueda es una tarea que requiere mucha dedicación y perseverancia. En este artículo os vamos a dar las claves para conseguir una página totalmente optimizada, así que, tomen nota:

En este post hablaremos una de las dos ramas que componen el SEO: On-Page. En próximos artículos hablaremos del SEO Off-page.

El también llamado SEO On-Site se ocupa fundamentalmente de la optimización interna de un sitio web y se define como el conjunto de acciones que se llevan a cabo para mejorar su posición en los resultados de los buscadores. Sin más, pasamos a enumerar los parámetros que se deben tener en cuenta:

  1. Palabras clave:

La selección de palabras clave o Keywords es el primer paso que se ha de dar en cualquier estrategia de posicionamiento SEO, ya que éstas son los términos que utilizan los usuarios para realizar las consultas en los buscadores. Debemos asegurarnos de que las palabras clave que escogemos para seleccionar nuestra página son las adecuadas.

  1. Estructura del sitio web:

En este punto debemos atender a tres factores principales:

  • Accesibilidad: esto determina que un sitio web pueda ser utilizado de forma satisfactoria por el mayor número posible de personas.
  • Usabilidad: necesaria para que los usuarios naveguen por el sitio de forma sencilla, sin complicaciones. La usabilidad está directamente relacionada con la Arquitectura de la Información que tiene un sitio web, que se encarga de organizar, estructurar y etiquetar los distintos elementos que la componen.
  • Arquitectura de la información: es la disciplina que se encarga del diseño estructural de la información y que se ocupa de organizar, estructurar, etiquetar y ofrecer un contexto para el contenido.

No debemos olvidar que la web ha de tener necesariamente un Diseño Responsive que permita que el sitio pueda ser visualizado perfectamente desde cualquier dispositivo. A día de hoy este factor es altamente valorado por los buscadores.

  1. Nombre del dominio:

El momento de escoger el nombre del dominio es sin duda de gran importancia. El dominio debe ser definitivo ya que cambiarlo puede tener graves consecuencias para el posicionamiento. Hay una serie de factores que se deben tener en cuenta a la hora de seleccionarlo, así que veamos algunos de ellos:

  • El dominio ha de ser coherente con nuestros objetivos.
  • Debe ser fácil de recordar y de escribir.
  • Se debe hacer una selección adecuada de la extensión (.es, .com, .org…)
  • A mayor antigüedad de dominio, más confianza ofrece y mejor valorado será para obtener un buen posicionamiento.
  1. Alojamiento web:

El alojamiento web o Hosting, es el servicio que provee a los usuarios de un espacio en un servidor web donde almacenar físicamente toda la información, la base de datos, o cualquier contenido accesible vía web. En este punto es importante tener en cuenta factores como la localización del servidor, el tiempo de respuesta o el hecho de que ese servidor sea utilizado por muchos clientes.

  1. Las metaetiquetas:

Lo cierto es que con los cambios de algoritmos de Google, estos elementos han ido perdiendo relevancia frente a otros factores determinantes para el posicionamiento, pero aun así hay que tenerlas muy en cuenta ya que aportan información valiosa a los robots de búsqueda. Veamos cuáles son las principales:

  • Etiqueta Title: es la más importante y la que más afecta al SEO. Lo ideal es que su extensión esté entre los 35 y 65 caracteres.
  • Metaetiqueta description: mediante un texto resumen, informamos a los buscadores sobre el contenido de la página. No debe superar los 160 caracteres.

Existen muchas más que debemos tener en cuenta, como la metaetiqueta robots, author, o de geolocalización.

  1. Enlaces internos:

Se trata de los enlaces que conectan las distintas páginas de un sitio web.

  1. Enlaces externos:

En este caso, son enlaces dentro del sitio web que dirigen hacia otras páginas. Es muy importante enlazar a páginas que tengan relevancia o relación con nuestro contenido y no enlazar a sitios de contenido dudoso que puedan estar penalizados por Google

  1. Archivo Robots.txt:

Lo primero que hace un el robot de un motor de búsqueda es buscar este archivo ya que le indicará qué contenidos deben indexar y cuáles no.

  1. Sitemap:

Se trata de un archivo XML que contiene todas las URL´s de un sitio y que queremos que sean indexadas.

  1. URL´s amigables:

Cada página ha de tener su propia URL, y que además ésta tenga relación con contenido de la misma para que el usuario sepa de un simple vistazo de qué trata esa página en particular.

  1. Tiempo de carga:

A día de hoy, el tiempo de carga es un factor determinante para conseguir un buen posicionamiento ya que el hecho de que un sitio web cargue rápidamente es muy valorado por Google. Veamos algunos de los factores que intervienen en el tiempo de carga de una web:

  • Velocidad del servidor.
  • Programación de la web.
  • Optimización de las imágenes.

Para saber más sobre la mejora de la velocidad y el rendimiento web, (WPO: Web performance optimization) lee nuestro artículo: Cómo mejorar la velocidad de carga web

  1. Contenido:

Seguramente habréis escuchado eso de “el contenido es el rey”. Pues bien, lo cierto es que con el transcurso de las actualizaciones de algoritmo se ha llegado al punto en el que se valora muy positivamente el contenido de calidad, original y relevante que aporte valor al usuario. Hoy en día es fundamental tener un contenido fresco y actualizado para optar a un mejor posicionamiento.

  1. Imágenes

Todo entra por los ojos y no basta con tener un contenido extraordinario, hay que hacerlo atractivo y que llame la atención de los usuarios. Por tanto, las imágenes y vídeos son contenido enriquecido que ofrece un valor añadido para el usuario. Debemos tener en cuenta que los buscadores no leen las imágenes por sí solas, sino que es necesario hacerlas legibles a través de una serie de atributos:

  • Nombre del archivo: ha de ser descriptivo del contenido de dicha imagen.
  • Descripción o texto alternativo (alt): aquí es donde debemos insertar un pequeño texto que amplíe la información.
  • Título (title): Ofrece una descripción breve y además se puede incluir la palabra clave. Proporciona información adicional al usuario y ayuda a los robots.

Por otra parte,  es necesario optimizar el tamaño de las imágenes para lo que en primer lugar, debemos elegir el formato más apropiado para cada caso:

  • .png: Se utiliza principalmente para imágenes de gran calidad. Gran rendimiento y versatilidad, (de hecho, nació como alternativa open source al .gif)
  • Formato .jpg: Es conveniente usarlo para imágenes grandes y con muchos colores.
  • Formato .gif: se trata de uno de los formatos más ligeros y que se utiliza en imágenes pequeñas, de pocos colores, o animadas.
  • .svg: Vectorial, versátil, programable y de múltiple uso para web y app’s.

Con esto, hemos repasado los principales factores On-Page que se han de tener en cuenta para tener optimizada nuestra página web y obtener mejores resultados en los motores de búsqueda. Dejamos para próximos artículos los factores Off-Page.

¿Y tú? ¿Has tenido en cuenta estos elementos a la hora de optimizar tu web?

Paula GiaoLo que debes tener en cuenta si quieres conseguir un buen SEO
leer más