La primera temptativa de fer un logo animat.
Es tracta d’un logo vectorial, es pot fer amb Illustrator, amb Affinity Design, amb Sketch… I després s’ha optimitzat online amb l’aplicació Vivus Instant, que hi afegeix el CSS necessari per aconseguir l’animació.
Un cop descarregada l’animació, s’ha optimitzat amb SGVOMG, i després s’ha pujat com a codi HTML en un bloc.
També es pot pujar com a imatge amb el plug-in SVG Support, tot i que ara per ara dóna problemes: el wordpress respon que aquest tipus d’arxius no estan permesos.
Per solventar-ho, només cal editar el codi de l’arxiu svg i posar-hi la següent directiva a la primera línia:
<?xml version="1.0" encoding="utf-8"?>
I ja està? No, no està.
Falta assegurar que la tipografia es vegi correctament. Si el nostre arxiu svg conté text, per defecte aquest es mostrarà amb les fonts del sistema, cosa que molt probablement arruinarà el nostre disseny.
Perquè això no passi, hem de pujar les tipografies a la nostra web (o a on sigui, és a dir, Google Fonts, Fontsquirrel, etc, etc) i cridar-les des d’una declaració CSS com la que hi ha a continuació, que en concret cridaria la font Novecentosanswide-Bold:
@font-face {
font-family: Novecentosanswide-Bold;
src: url(https://www.webdexemple.com/ruta-cap-a-la-carpeta-de-les-tipos/Novecentosanswide-Bold.otf);
}
I ara si que ja ho tenim tot. Per ser un primer intent, trobo que està prou bé 😀
