Région Suisse Romande 🔗🔗🔗

En cours de création.

Point Barre / couleur 3

Emoji 📌📌📌

Codeur Barbu - Emojii Splinter Cell Fan Art
Emoji : Assassin's Creed Odyssey - Socrate Fan Art
Emoji Far Cry New Dawn Fan Art by codeur barbu

SVG – NOT a FAQ

Un article sans image qui parle d'image ? PNg vs SVG ? En réponse à l'article de David Orset sur son blog : Poulpe en SVG avec Method Draw pour Stéphane Pécaut ( http://krakoukas.com/informatique/web/svg/svg/ )

PNG vs SVG

Pour faire court,  pour le PNG, on est dans un format d’image bitmap contre le SVG, un format d’image vectorielle. Chacun a ses avantages et inconvénients dépendants du contexte, de la mise en situation.

"Tout ça pour à la fin avoir un PNG aplati ? Donc ça servait à rien"

Un png devra être utilisée dans une taille fixe. (usage unique)
Un svg, tu peux zoomer ou pas, la qualité sera là. N’importe quelle taille. (pratique pour les icones, pour l’impression, etc)

"parfaitement lissé"

Si ton svg est créé sans avoir pris le soin de lisser les courbes, alors le problème est autre. Il faut soit prendre plus de temps et lisser en étant conscient que ce n’est pas lisse, ou le faire correctement dés le départ.  (correctement au sens lisse visuellement :o)

Des apps pour dessiner sur tablette, lissent automatiquement la courbe vectorielle selon les options de crayons ou pinceaux  choisies, mais le résultat sera en bitmap. Je pense typiquement à des apps comme procreate, sketchable, art rage, … 

Y-a-t’il des avantages ? Oui l’édition, l’optimisation, la transparence, l’animation, et j’en passe, ici j’aborde juste ce qui me vient à l’esprit.

1. Édition

Avec le format svg, tu peux ouvrir dans un éditeur et éditer le dessin de façon vectoriel. Pour le png, tu travailleras plutôt dans un éditeur comme firework ou photoshop, ou affinity Photo, etc, puis exportera en PNG.

Des éditeurs :

  • boxy SVG ($,€ , CHF bon marché)
  • Inkscape (open source)
  • Adobe illustrator ($,€, CHf cher à abonnement cloud)
  • Affinity Designer ( demi prix, prix raisonnable)
  • online svg editor (problème lié au web, malware, confidnetialité)
 

Privilégier lesquels ? Les en-lignes, les app android/ios, les software mac ou pc ? Personnellement, les éditeurs offlines comme boxy SVG. Sur surface go, un délice.

En outre tu peux faire de l’animation (2), le contrôler par code (3), … en utilisant les concepts de vectoriel.
Le png avec des concepts de matrice bitmap.

2. Optimisation

On a deux types de fichiers SVG :
Le svg source (avec commentaires si ça existe, avec des retour à la ligne, des espace, des headers, du code proprio, polices, etc)
Le svg minified, ou on garde que les infos nécessaires à l’affichage.

Pour minifier, le plus simple pour la démonstration : utiliser un minifier online (attention aux droits d’auteur et confidentialités.)
exemple : https://vecta.io/nano
On tombe en dessous de 2.5ko pour l’exemple suivant, petite modification à l’arrache :
http://irl.o0o.ch/piregwan/krakoukas/poulpy3-minified.svg

Krakoukas Poulpe rapidement Hacké

Via mon wp page builder, j’insère le poulpe SVG édité par Stéphane Pécaut, et j’ajoute une couleur rouge via “CSS”. On s’amuse bien, on pourrait faire une série d’icone Style emojii. En format png, cela est un peu plus hardu à faire, dû au fait de l’usage unique et du prix d’un éditeur.

Une petite étoile ?
[Totale: 1 Moyenne: 5]
Codeur Barbu aka Stéphane Pécaut

Codeur Barbu aka Stéphane Pécaut

Amateur de salades et de jolis dessins, Steph 🔥 web | design | ✏ drawing | 📷pictures | 🙏yoga | 🥗 Salad & master of 🔎

2 réponses

  1. J’ai été hacké ! Et le résultat est mieux que l’original, parbleu ! Du coup j’ai plein d’autres questions. Est ce que ca vaut le coup d’acheter pour PC boxy SVG ? Comment on manipule les SVG par des CSS ?
    Bravo pour l’article très complet et le poulpe non moins réussi 🙂

    1. Merci oh divin poulpe !

      PC boxy ? ça vaut la peine pour avoir un software très épuré qui permet pas ma lde contrôle sur la construction du SVG. ça en vaut la peine, si c’est utilisé souvent. Je me base toujours sur le prix d’une place de cinéma en Suisse . si tu utilises plus de x heures alors vasy !

      SVG par css ? A l’arrache comme ça, en utilisant les selecteurs CSS et en ayant codé le svg en bon édu forme, genre tu peux changer une couleur par exemple yeux et barbes, couleur brun à bleu et voila barbe bleu !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

à propos de moi

Stéphane Pécaut - Web dévelopeur

Amateur de bonnes salades et de dessins.
🔥 web | design | ✏ drawing | 📷pictures | 🙏yoga | 🌶️piments | 🥗 Salad  and 🔎 &#@    

Articles récents

Commentaires récents

Liens amis