OLVIDATE DE LOS PIXELS

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

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?

¡A PRACTICAR!

Vamos a la siguiente URL:https://github.com/jorgeatgu/svg-congreso-web/

Primer ejercicio

Incluyendo SVG en nuestros proyectos

Segundo ejercicio

Optimizando SVG

Tercer ejercicio

Sprites con SVG

Cuarto ejercicio

Filtros con SVG

¡GRACIAS!