3º grado y un café SVG: @jorgeATGU frente a @elrumordelaluz 3.11.15

3º grado y un café SVG: @jorgeATGU frente a @elrumordelaluz

Si hay dos nombres que inmediatamente me vienen a la cabeza al pensar en SVG en español y a quienes recurro cuando me enfrento a cualquier tema relacionado con él esos son Jorge Aznar (aka @jorgeATGU) y Lionel T (aka @elrumordelaluz).

A muchos de vosotros no os descubriré a estas alturas sus conocimientos sobre los gráficos vectoriales escalables y, lo que es más importante, su disposición a compartirlos ya sea en artículos divulgativos o en sus case study en forma de demos o pens en Codepen.

Así que por todo ello se me ocurrió intentar liarlos para que compartiesen sus ideas y opiniones sobre SVG con todos nosotros. Pero de tal forma que el atraco no se notase demasiado ni les supusiese robarles excesivo tiempo.

Decidí pasarles un mensaje privado por Twitter (yo sigo a ambos y tú deberías hacerlo también) sin que supiesen que el otro también lo recibía:

Disculpa este atraco matutino xD.
¿Qué 5 preguntas (o cuestiones) sobre SVG le harías a (el otro) si te sentases con él a tomar un café?
Y no necesariamente tienen que ser cómodas de responder ;-)
Sí. Como te imaginarás es una idea para el blog. Así que mejor que quede entre nosotros dos.
Gracias.

Y una vez que tuve sus respectivas preguntas les desvelé el engaño. Y ahí ya estaban perdidos. Si habían decidido participar en una "encerrona" para con el otro ahora no se podían negar a responder las cuestiones que le eran planteadas.

Con mucho placer me siento a tomar un SVG café con usted, estimado Jorge.
Antes que nada, creo importante aclararte que las cuestiones que me vinieron a la mente consultarte como experto en SVG son, en su mayoría, aspectos o situaciones en las que me he visto involucrado y he intentado pensar, crear o resolver algo, sin importar el resultado.

Llámame liante o maquiavélico. Pero esta vez la jugada me salió redonda. Y aquí tienes el resultado de este café virtual entre Jorge y Lionel sobre SVG.

Nota del Editor: al final de cada pregunta (y entre paréntesis) su autor.

— ¿Cuándo fue la primera vez que oíste/leíste hablar sobre SVG? (Jorge)

Lionel T

Empecé a jugar con SVG no hace mucho tiempo, si bien lo conocía (principalmente como extensión de archivos vectoriales gráficos). El "click" se produjo hace 'circa' unos cinco años, en un juego ida y vuelta entre mockups en Illustrator y maquetaciones web para un portal bastante grande en el que estaba trabajando.

No solo iba entendiendo que el file gráfico contenía ya un lenguaje de etiquetas (web), sino que me comenzaba a fascinar el pasaje inexistente entre crear un gráfico y acceder al mismo en el browser. Se juntaron dos cosas que me gustan: diseñar y codificar ;)

Jorge Aznar

Pues a principios de este siglo. Cuando estudiaba diseño gráfico tenía un profesor que por las tardes y altruistamente nos daba clases de HTML. En una de esas clases salió el tema de un nuevo formato gráfico y libre llamado SVG, pero como mi Freehand(el Sketch del pasado) no lo aceptaba lo olvidé.

Tuvieron que pasar unos cuantos años: estaba haciendo iconos para mi web con photoshop y ver todo pixelado me volvía loco. En diseño gráfico que algo que puede ser vectorial este pixelado es muerte y destrucción, así que me acorde de mi profesor. Ademas hacia poco que había hecho el peor port de la historia, pasar de Freehand a un programa que todavía no lo ha conseguido alcanzar como Illustrator, vi que exportaba SVG y empece a buscar información.

Me leí varias veces la especificación, compre y descargué libros y acumule decenas de artículos(que todavía guardo en mis favoritos). Luego vino el resurgir de SVG y hasta ahora.

— ¿Qué opinas de que Chrome de otra estocada a SMIL y del poco apoyo que ha tenido por parte de la comunidad? (Jorge)

Lionel T

No more smiles for SMIL
Ni bien recibida la noticia (probablemente en sincronía con ustedes, visto que el pequeño pío-pío celeste difunde las noticias sin husos horarios), me pareció bastante dura la !"movida" de Chrome. Inmediatamente pensé en cómo podremos hacer esas (algunas o tantas) cosas divertidas que lográbamos hacer con SMIL.

De todas formas duró poco esa sensación, y fue reemplazada con un punto de vista menos egoísta y más analítico: quienes construyen (o construimos) la web, queremos que evolucione. En particular, la gente de Chrome habrá analizado una serie de aspectos (implementación en browsers; cómo fue evolucionando, si evolucionó; alternativas; uso corriente en el web) para llegar a esta elección.

Esto no significa que confíe ciegamente en lo que elige un team específico de Google, pero quiero que el web y en particular las animaciones en SVG evolucionen.

Me encanta hacer cosas con SMIL y me divierte mucho jugar y experimentar con esta tecnología, pero apostaría a enriquecer las animaciones CSS y ver qué sucederá con WebAnimations. Ya podemos ver cositas (aunque un poco limitadas aún) como la animación siguiendo un path que ustedes bien desarrollaron en vuestros correspondientes blogs.

En síntesis, continúo con una sonrisa, aunque la consola de Chrome me muestre:

Jorge Aznar

Bueno pues desde mi opinión personal me parece MAL. Ya he comentado en más de una ocasión que una de las cosas con las que me he divertido ha sido aprendiendo y animando cosas con SMIL. Es fácil de aprender y para mi lo tiene todo a la hora de animar.

Los únicos límites que me he encontrado han sido los bugs y el poco interés por la gente de Microsoft, interés que un día tuvieron.

Nota del editor: Jorge, en su momento, escribió este artículo en su blog al respecto.

— ¿Entiendes los filtros de SVG? :d
    ¿Con cuál de ellos te has divertido más y por qué? (Jorge)

Lionel T

feUndefined
Claramente no, prefiero decir que no entiendo los filtros. Eso no significa que no entienda cada filtro (aunque en ciertos casos es bastante complicado, más que nada algunos atributos y valores). Prefiero mantenerme cauto a decir los entiendo, con todas las letras, principalmente, porque me parece un aspecto "high power" de SVG, con el que se pueden lograr muchas, muchísimas cosas impensables.

Es una materia del SVG en sí misma, bajo mi punto de vista. Merece un estudio aparte.

No todos los filtros 'primitivos' comparten los mismo atributos, hay algunos con atributos muy complejos, podemos crear nuestros propios filtros combinando varios, y esta parte es super interesante, y hasta podemos aplicar filtros a contenido html.

Con los 'primitivos' me he divertido bastante con feTurbulence, sus frecuencias y octavas probando a hacer visualizaciones de señales de audio, pero también con uno de los mas difundidos y simples como feGaussianBlur.

En síntesis, creo que feSuperAwesome!

Jorge Aznar

!BUFFFF! ¡Cómo sufro!

Me he leído la especificación varias veces, y aunque entiendo lo que hacen todos los filtros, como algunos tienen procesos tan complejos, me explota la cabeza. Por eso cree SVG-Filters para ver el resultado y olvidarnos de lo que viene por detrás.

Por cierto, estoy trabajando en una nueva version :)

— ¿Cuál es para ti la mejor librería para animar SVG? (Jorge)

Lionel T

Creo que hoy se habla muchísimo de librerías para animar el DOM y en particular SVG.
No me voy a arriesgar a designar una como la mejor porque mucho me falta probar y pensar. Puedo dar un feedback veloz con la información que tengo hasta el día de hoy:

• Snap.svg la he usado hace bastante tiempo y me da la sensación que su slogan es coherente, parecería ser tan simple como jQuery lo es para manipular el DOM, en este caso cuestiones SVG.
• VelocityJS no la he probado pero parecería ser bastante intuitiva. Puedo recomendar un buen artículo de octuweb que explica bien en detalle ;)
• Con animatePlus he probado pequeñas cositas y parecería ser prometedora. Me gusta que sea tan liviana y que este escrita en ES2015.
• Si bien con GSAP no he hecho uso y abuso suficiente como para hacer profundas declaraciones, es una librería muy pero muy completa y con un desarrollo permanente y bastante actualizado. Hay una serie de plugins específicos para SVG que permiten hacer mucho. Me da la sensación que es una librería que esta siendo desarrollada prestando bastante atención a ciertas _ cosas que se están haciendo con SVG hoy en día, resolviendo _ problemáticas ya conocidas en este ámbito.

Creo que todas las librerías comparten una cierta simpleza en cómo animar y aplicar ciertos atributos (algunas mas semánticas que otras), no entro en el discurso performance, pero hay bastantes posts y tests dando vueltas, que pueden ayudar a la hora de analizar ese aspecto.

Hoy por hoy si tengo que elegir una, elijo GSAP y le quiero dar más tiempo de uso para poder pasar a otra/s (o alguna nueva que aparezca, o WAAPI).

Jorge Aznar

VelocityJS, y eso que no es una librería que esté dedicada exclusivamente a animar SVG. Tengo ganas de probar GSAP sólo por las cosas que veo en CodePen, se que va a ser tan divertido(pero no tan fácil) como aprender SMIL.

— ¿Qué añadirías de CSS a SVG? (Jorge)

Lionel T

Por un lado agregaría (y creo será posible en SVG2) la posibilidad de controlar muchos más atributos svg desde css como: .mySvg { viewBox: -256 -256 512 512 }. Agregaría también la opción de acceder desde css al contenido svg llamado desde xlink:href y poder aplicarle estilos específicos.

Creo que se SVG podría heredar/aprender/tomar prestado dos conceptos de CSS: el de stacking context (por el medio que sea) y poder extender el coordinate system y poder alterar cómo viene computado el elemento en el documento.

Creo de todas formas que css tiene mucho por implementar de svg y viceversa. Y ya irá llegando, hay muchos drafts dando vueltas por ahí.

Jorge Aznar

Más que añadir lo que pido es más control del propio SVG desde CSS, no quedarnos en el fill y el stroke. ¡Queremos MÁS!

— ¿Sabes el porqué del default size '300x150' de un 'svg' que no tiene medidas especificas? (Lionel)

Lionel T

Pregunta poco profunda para alguien que considero trabaja hace tiempo con este lenguaje gráfico XML

Jorge Aznar

Se supone que si tú no especificas un ancho y un alto el tamaño por defecto será de 100%. La especificación es clara:
If the attribute is not specified, the effect is as if a value of '100%' were specified.

No hace mucho se hablo de este tema en la espartana pero muy que muy recomendable lista de correo de SVG de la W3C: parece ser que le echan la culpa a CSS.

Por cierto la lista no tiene ni un cuarto de tráfico que la de CSS, así que casi todo que llega suele ser interesante. Añadidla a vuestro feed :)

— ¿cómo aplicarías 'transform: translateZ(...)' (y 'perspective') en SVG (Lionel)

Lionel T

Estuve intentando aplicar transformaciones en el eje z de, tanto a elementos internos de un svg como de a un svg entero y, parte por el tiempo limitado, parte por pensarla como una lucha perdida, lo deje a mitad de camino el estudio y lo resolví directamente en css.

Jorge Aznar

Me pillaste, no tengo ni la menor idea. Quizás el alquimista del CSS que nos ha metido en este lío sepa la respuesta.

— ¿has usado 'foreignobject'? ¿algun aviso o cuidado particular? (Lionel)

Lionel T

Te preguntaba lo de foreignObject porque he leído muy poco al respecto. Lo he usado una vez con un resultado bastante interesante, pero no se por qué me daba la sensación que o hay que tener en cuenta alguna cuestión particular o hay algo "deprecated" o no se, quizá saber de algún "piccolo particolare".

Jorge Aznar

Me he obligado a usarlo un par de veces pero lo veo un poco guarrada. ¿alguna idea buena? A mi no se me han dado casos donde utilizarlo bien, por llamarlo de alguna manera.

— '<use>' es muy útil pero tiene alguna limitaciones de acceso (se comporta tipo shadow DOM), ¿cómo accedes si necesitas? (Lionel)

Lionel T

He nombrado a <use> cuando hablaba de mis expectativas para SVG2, creo que ya bastante podremos mejorar cuando tengamos las --variables css. Por ahora nos contentaremos con currentColor, ¿no?

Jorge Aznar

Me hice esa misma pregunta en su día. Con SMIL podia incluir dentro de DEFS un elemento que se animaba y luego reutilizarlo a lo largo del documento con use pero luego no podía modificar la animación. No encontré la manera para hacer lo que yo quería y lo deje.

— Iconos SVG, ¿prefieres un 'defs' bien grande en el documento, un archivo '.svg' externo con todos los iconos o archivos separados por icono?
   — Para estas opciones, ¿prefieres <g> o <symbol>?
   — Como background ¿podemos usar ya "url(myIcons.svg#icon)"? (Lionel)

Lionel T

Yo prefiero un file externo con symbol´s en caso de iconos a los cuales no necesito acceder, caso contrario inline.

Jorge Aznar

Un archivo externo donde poder incluir iconos 'ad infinitum', utilizo <g> por costumbre.

Se que con symbol puedes modificar el viewBox del elemento al que hacemos referencia pero tampoco me gusta rizar el rizo.

Lo que me alegré el día que descubrí que podía crear un sprite con "fragments identifiers" e invocarlo como background de CSS. Encima tenía soporte en IE, pero no en nuestros amigos de Webkit/Blink, creo que Safari iba a implementarlo pero ahora estoy hablando de memoria. No hay manera de que se pongan de acuerdo en dar soporte a la vez a algo. Así que FAIL.

— Para terminar ¿quién paga la cuenta de este café SVG? (El Editor)

Jorge Aznar

Un placer responder a las preguntas de Lionel.
La cuenta la puedes enviar a Redmond! :)

Lionel T

De nuevo, ha sido un placer compartir pequeñas (pero escalables) cosillas, por medio de este juego cybernetico de Kseso.
Por cierto, me gustó el concepto "SVG Caffè". Aquí mi interpretación:

See the Pen SVG Caffè by Lionel T (@elrumordelaluz) on CodePen.

"Rerun" para tomarte este café de Lionel