En effet il faut être certain d'avoir l'attribut viewBox sur le SVG mais également avoir des valeurs correctes. Pour les trouver, c'est simple, cela se fait en une ligne de Javascript : document.querySelector('monsvg').getBBox( ) . La valeur de retour sera [ min-x, min-y, width , height ], les quatre valeurs nécessaires de la viewBox. Arrondir à la première décimale suffit.
Merci mon grafikart tes un genie j'avais un problème sur un svg j'ai fait 2 heure dessus avec ta vidéo j'ai régler le problème en regardant ta vidéo 4 minute .
je tombe par hasard sur ton tutoriel de 2015 et tu m'apprends qu'on peut mettre une extension SVG viewer sur W10... j'ai envie de te payer un coup tu viens de grandement m'aider !! THX
J'attends avec impatience la suite ! Notamment pour les animations via des bibliothèques comme Tweenmax, ainsi qu'également leur création/workflow et leur optimisation via de nombreux outils en lignes (pour optimiser le poids notamment) - Enorme merci en tout cas pour ce tuto :)
Petite info 5 ans plus tard :) le xlink:href=" " utilisé à 9:54 n'est plus supporté depuis 2018, utilisez href=" " tout simplement. Super vidéo merci !
Merci beaucoups pour vos vidéos. Mes browsers n'affichent pas les images svg. et indiquent ceci: error en line 1 at column 1 : encoding error - below is a rendering of the page up to the first error. What should I do? Take care.
Hello Grafikart, j'espère que tu pourras encore répondre à ma question (ou que quelqu'un d'autre le fera) puisque la vidéo commence à dater un peu. J'ai importé mon SVG dans une balise img et je souhaite le personnaliser en CSS avec un "lien externe" car je trouve ça plus propre qu'avoir du SVG partout dans mon fichier HTML. Après plusieurs recherches, j'ai vu qu'il me fallait placer ce lien dans mon fichier SVG : A partir de là, j'espérais pouvoir changer les couleurs de mon SVG dans mon fichier style.css mais rien ne se passe ! As-tu (ou quelqu'un a t-il) des pistes pour résoudre cette problématique ? Merci d'avance !
Il utilise Bootstrap getbootstrap.com C'est une feuille de style css très complète que tu télécharge ou que tu inclues directement depuis son adresse sur le site de Bootstrap (pour avoir des fonctionnalitées comme des onglets etc... Il y a aussi des feuilles js), et là, en l'occurrence il utilise la classe btn, qui est une classe de Bootstrap permettant de céer des boutons, puis dans le premier bouton btn-success, qui lui donne sa couleur verte et dans les deux autres btn-danger, qui leur donne la couleur rouge (il yen a quelques autres types, tu peux regarder sur le site de bootstrap ^^) Le site de Bootstrap est assez complet mais c'est en Anglais. Si tu veux un tuto en Français, tu peux regarder sur Openclassrooms : openclassrooms.com/courses/prenez-en-main-bootstrap ;D
Bonjour à tous, Je me posais une question par simple curiosité... A l'époque il y a bien bien bien bien longtemps on utilisait des BMP, puis est arriver dans le HTML la gestion des jpg... Vous voyez ou je veux en venir ? J'ai dessiner un logo en SVB qui fait 15 ko, je me suis dis, comme c'est du texte, c'est compressible, je l'est compressé en tar.gz et il est tombé à 3,8 ko ! D'où ma question, et je n'est rien trouver sur le net, je ne dois pas être le seul à m'être posé cette question : Pourquoi il n'y a pas de gestion d'images SVG compressé en HTML ou s'il y en a une même avec un autre format de compression je serais bien curieux de la connaître, même si je sais qu'on va me répondre que les fichier SVG sont tellement petit qu'il n'est pas la peine des les compressé ?
En effet il faut être certain d'avoir l'attribut viewBox sur le SVG mais également avoir des valeurs correctes. Pour les trouver, c'est simple, cela se fait en une ligne de Javascript :
document.querySelector('monsvg').getBBox( ) . La valeur de retour sera [ min-x, min-y, width , height ], les quatre valeurs nécessaires de la viewBox. Arrondir à la première décimale suffit.
Merci mon grafikart tes un genie j'avais un problème sur un svg j'ai fait 2 heure dessus avec ta vidéo j'ai régler le problème en regardant ta vidéo 4 minute .
je tombe par hasard sur ton tutoriel de 2015 et tu m'apprends qu'on peut mettre une extension SVG viewer sur W10... j'ai envie de te payer un coup tu viens de grandement m'aider !! THX
J'attends avec impatience la suite ! Notamment pour les animations via des bibliothèques comme Tweenmax, ainsi qu'également leur création/workflow et leur optimisation via de nombreux outils en lignes (pour optimiser le poids notamment) - Enorme merci en tout cas pour ce tuto :)
Pour information, avec les pixels, c'est le format: Matriciel
Petite info 5 ans plus tard :) le xlink:href=" " utilisé à 9:54 n'est plus supporté depuis 2018, utilisez href=" " tout simplement. Super vidéo merci !
Merci! super tuto
une bible en 36minutes merci pour tout
Cool, j'étais en train d'en manipuler :D
merci beaucoup très instructif pour les étudiants en informatique comme moi
Super tuto! you helps me out on 2019 :D
Bonjour Grafikart, quand je fais le sprite et j'utilise un svg dans mon html je recois un tas enorme d'erreure dans la console, c'est normal ?
SVG POWEEEER !!!
Merci pour ce super tuto :D
I guess Im kinda randomly asking but does anyone know of a good website to stream newly released series online?
@Tristan Milo Flixportal :D
@Ronald Rohan thank you, I went there and it seems like a nice service :) I really appreciate it!
@Tristan Milo Glad I could help =)
Merci beaucoups pour vos vidéos. Mes browsers n'affichent pas les images svg. et indiquent ceci: error en line 1 at column 1 : encoding error - below is a rendering of the page up to the first error. What should I do? Take care.
Merci beaucoup :)
mercie pour la pile de bonne information)
Hello Grafikart, j'espère que tu pourras encore répondre à ma question (ou que quelqu'un d'autre le fera) puisque la vidéo commence à dater un peu.
J'ai importé mon SVG dans une balise img et je souhaite le personnaliser en CSS avec un "lien externe" car je trouve ça plus propre qu'avoir du SVG partout dans mon fichier HTML. Après plusieurs recherches, j'ai vu qu'il me fallait placer ce lien dans mon fichier SVG :
A partir de là, j'espérais pouvoir changer les couleurs de mon SVG dans mon fichier style.css mais rien ne se passe ! As-tu (ou quelqu'un a t-il) des pistes pour résoudre cette problématique ?
Merci d'avance !
Bon Noël Grafikart :)
comment tu fait pour crée des bouton si facilement et quelle te ton css ?
Il utilise Bootstrap getbootstrap.com C'est une feuille de style css très complète que tu télécharge ou que tu inclues directement depuis son adresse sur le site de Bootstrap (pour avoir des fonctionnalitées comme des onglets etc... Il y a aussi des feuilles js), et là, en l'occurrence il utilise la classe btn, qui est une classe de Bootstrap permettant de céer des boutons, puis dans le premier bouton btn-success, qui lui donne sa couleur verte et dans les deux autres btn-danger, qui leur donne la couleur rouge (il yen a quelques autres types, tu peux regarder sur le site de bootstrap ^^) Le site de Bootstrap est assez complet mais c'est en Anglais. Si tu veux un tuto en Français, tu peux regarder sur Openclassrooms : openclassrooms.com/courses/prenez-en-main-bootstrap ;D
+Yann Aguettaz quelle bootstrap en particulier ?
Bonjour à tous,
Je me posais une question par simple curiosité...
A l'époque il y a bien bien bien bien longtemps on utilisait des BMP, puis est arriver dans le HTML la gestion des jpg...
Vous voyez ou je veux en venir ?
J'ai dessiner un logo en SVB qui fait 15 ko, je me suis dis, comme c'est du texte, c'est compressible, je l'est compressé en tar.gz et il est tombé à 3,8 ko !
D'où ma question, et je n'est rien trouver sur le net, je ne dois pas être le seul à m'être posé cette question :
Pourquoi il n'y a pas de gestion d'images SVG compressé en HTML ou s'il y en a une même avec un autre format de compression je serais bien curieux de la connaître, même si je sais qu'on va me répondre que les fichier SVG sont tellement petit qu'il n'est pas la peine des les compressé ?
merciii
Tes vidéos sont très intérressantes, mais pourquoi elles sont toujours si longue ?