Redimensionner SVG en HTML ?

Question

Je possède un fichier SVG à l'intérieur d'un document HTML, et une des choses que j'ai entendues à propos de ce format est qu'il ne devient pas tout pixélisé lorsque vous zoomez dessus.

Je sais qu'avec un JPEG ou autre, je pourrais le stocker en tant qu'icône de 50 par 50, puis effectivement l'afficher en tant qu'une vignette de 100 par 100 (plutôt pixélisée) ou 10 par 10, en définissant manuellement la hauteur et la largeur dans la balise image_src.

Cependant, les fichiers SVG semblent être utilisés avec des balises object/embed, et changer la hauteur ou la largeur DE CELLES-CI entraîne simplement plus d'espace alloué pour l'image.

Existe-t-il un moyen de spécifier que vous souhaitez qu'une image SVG soit affichée plus petite ou plus grande que ce qu'elle est effectivement stockée dans le système de fichiers?

Answer 1

Changer la largeur du conteneur résout également le problème au lieu de changer la largeur et la hauteur du fichier source.

.SvgImage img{ width:80%; }

---

Cela résout mon problème de redimensionnement du svg. Vous pouvez donner n'importe quel % en fonction de vos besoins.

Answer 2

Voici un exemple pour obtenir les limites en utilisant svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

À la fin, vous obtenez des chiffres que vous pouvez insérer dans le svg pour définir correctement la vue. Ensuite, utilisez n'importe quel css sur le div parent et vous avez terminé.

 // obtenir tous les objets SVG dans le DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- obtenir la limite visuelle requise pour afficher tous les enfants
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // définir la zone visible en fonction de la valeur ci-dessus
    svg.setAttribute("viewBox", viewBox);

Answer 3

Supprimez les attributs height et width dans l'élément svg. Ajoutez un attribut viewBox, par exemple viewBox 0 0 100 100, puis utilisez simplement le CSS height ou width pour mettre à l'échelle l'élément svg.

REMARQUE : l'attribut viewBox est sensible à la casse. Si vous utilisez un b en minuscule, cela ne fonctionnera pas.

.fifty{
height: 50px
}
.hundred{
height: 100px
}

50x50

100x100

Answer 4

J'ai un fichier SVG en HTML [...]. Existe-t-il un moyen de spécifier que vous voulez qu'une image SVG soit affichée plus petite ou plus grande qu'elle n'est réellement stockée dans le système de fichiers?

Les graphiques SVG, comme d'autres œuvres créatives, sont protégés par le droit d'auteur dans la plupart des pays. Selon la juridiction, la licence de l'œuvre ou que vous soyez ou non le titulaire des droits d'auteur, il se peut que vous ne puissiez pas modifier le SVG sans violer le droit d'auteur, croyez-le ou non.

Mais les lois sont des sujets délicats et parfois vous voulez simplement faire avancer les choses. Par conséquent, vous pouvez ajuster l'échelle du graphique sans modifier l'œuvre elle-même en utilisant la balise img avec l'attribut width dans votre HTML.

Utilisation d'une requête HTTP externe pour spécifier la taille:

Spécification de la taille dans le balisage à l'aide d'un Data URI:

Les SVG peuvent être optimisés pour les Data URIs pour créer des images de favicon SVG adaptées à n'importe quelle taille: