Alors là ça se voyait clairement que c’était Inkscape, c’était écrit en commentaire. Donc j’ai pris le temps de supprimer les méta-données inutiles, les id inutiles, les styles inutiles, le nombre de décimales inutiles, les groupes inutiles, etc. avec python-scour (je le recommande, le fichier doit être environ 3× plus petit maintenant), j’ai supprimé l’indentation, tout ce que le validateur du W3C me laisse retirer sans gueuler, et voilou ! Bon après on comprend toujours rien, mais bon allez comprendre des courbes de bezier instantanément… que ce soit réduit ou non, c’est du pareil au même.
Voilà la version en fichier unique du logo des autoblogs twitter !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur (mais de vraiment peu), mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs twitter !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur, mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs shaarli !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur (mais de vraiment peu), mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs statusnet/GNU Social !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur, mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs génériques !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Alors mon gros changement du pull 41 (pull request à peine faite), il faut évidemment adapter le CSS, pour les nouveaux éléments HTML5, comme le nettoyage du code. J’utilise ainsi les sélecteurs avancés (>, :target) de CSS2.1, mais c’est pas plus avancé que :hover, et la spécification date du XXe siècle, et les sélecteurs avancés fonctionnent partout, même sur IE, à l’exception de Netscape et Mozaic.
J’ai aussi supprimé plusieurs id du coup, pour ne spécifier les id que sémantiquement et clairement, sans superflu. J’ai aussi ajouté un max-height à img par défaut, parce que chez moi mon image de 713px dépasse largement le bloc (et évidemment « max-height:100% » ne donne pas le résultat voulu, et ne fait rien), mais il faudrait mettre ça en px dans un conditionnel en fonction de la taille de l’écran, ou trouver un moyen de lui faire faire la hauteur du block de la section.
J’ai aussi supprimé une propriété CSS de gradiant MS, déjà parce que IE est en train de tomber (et tout le monde il est content, et tout le monde il va faire du standard, et le fait-pou-IE est mort, etc.), et puis parce que c’est non seulement pas standard, mais que ça rend le CSS invalide pour le validateur du W3C (et ça pourrait donc créer des problèmes avec certains navigateurs, et diminuer l’expérience de certains à cause d’IE, je sais pas pour les autres, mais moi JAMAIS).
Mitsukarenai
Garreau Alexandre