vectorizando la web

Por Jorge Aznar

¡Buenas tardes!

Me llamo Jorge Aznar y trabajo como front en Hiberus Internet.

HISTORIA

Database : Architect

JavaScript : Engineer

SVG : Archaeologist

SCOTT JEHL

SOPORTE

ESTRUCTURA

VENTAJAS

http://jorgeatgu.com/svg SVG vs PNG

PNG = 6.2KB

SVG = 1.2KB

Es scalable

Es código

Le 'podemos' dar estilos con CSS

Es accesible

                
                  
                  Logo de Jorge Aznar
                  
                    front/design en Zaragoza. Autor de Scalable un libro sobre SVG.

Lo podemos animar con CSS, SMIL y JavaScript

Logo de Jorge Aznar Diseñador gráfico y web en Zaragoza. Maquetación y diseño web con HTML5, CSS3, SVG, Responsive Web Design y Mobile-First.

Y ADEMÁS...

  • Las formas básicas
  • Texto
  • Transformaciones
  • Filtros
  • Degradados
  • Patterns
  • Mask
  • Imágenes

HIPSVGTER

LEAVING PIXELS TODD PARKER

SVG = 238kb - JPG = 32kb

INCLUYENDO SVG

En línea

              
                
                Logo de Jorge Aznar
                
                  front/design en Zaragoza. Autor de Scalable un libro sobre SVG.
  • Nos ahorramos un request
  • Animaciones con CSS

Con etiqueta IMG

              
                Logotipo de Jorge Aznar
  • No podemos animar con CSS/JS
  • Una petición más

A través de CSS

              
                .logo {
                  background-image: url(logo-jorgeatgu.svg);
                }
  • No podemos animar con CSS/JS

Con la etiqueta object
  • Fallback!
  • No podemos animar con CSS/JS

Y esto es lo que pasa por guardar en SVG y olvidarte de todo lo demás...

OPTIMIZAD!!!

Illustrator

Archivo > Exportar > Exportar como

Optimizado

          
          
          logo-blanco-negro

Sin optimizar

          
            
            
            
            logo-blanco-negro

SVGO

SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.

WEB GULP GRUNT

SPRITES!

Archivo

sprites.svg

usando el sprite

Internet Explorer

librerías

svg4everybody svgxuse Gulp SVG sprite

PROGRAMAS

Adobe Illustrator

LICENCIA MENSUAL: 24,19€(CON IVA)

Inkscape

LICENCIA: GRATUITA

Sketch

LICENCIA: 112,89€(CON IVA)

CUALQUIER IDE!!

¡LEED!

SCALABLE, un libro sobre SVG

Bibliografía

The Perfect WordPress Inline SVG Workflow Using Inline SVG Sprites in WordPress Themes Sprites con SVG Understanding SVG Coordinate Systems Múltiples artículos Fildrop, SVG Filters Animando SVG con JS Awesome SVG

Y para cualquier duda me tenéis a vuestra disposición en Twitter o más pausadamente por mail(contactoARROBAjorgeatgu.com)

¿PREGUNTAS?

¡GRACIAS!