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
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 !

Les commentaires sont fermés.

Ă  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