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

Ouvrez votre fichier .svg avec un éditeur de texte (c'est juste du XML), et cherchez quelque chose comme ceci en haut :

`

Effacez les attributs de largeur et de hauteur ; les valeurs par défaut sont de 100 %, donc il devrait s'étirer en fonction de ce que permet le conteneur.

`

Answer 2

Essayez ceci:

1. Définissez le viewbox manquant et remplissez les valeurs de hauteur et largeur des attributs de hauteur et de largeur définis dans la balise svg

2. Ensuite, mettez simplement l'échelle de l'image en définissant la hauteur et la largeur aux valeurs de pourcentage désirées. Bonne chance.

3. Définissez un ratio d'aspect fixe avec preserveAspectRatio="x200Y200 meet (par exemple, 200px), mais ce n'est pas nécessaire

par exemple

Answer 3

J'ai trouvé qu'il est préférable d'ajouter les attributs viewBox et preserveAspectRatio à mes SVG. Le viewbox devrait décrire la largeur et la hauteur complètes du SVG sous la forme 0 0 w h:

Answer 4

Utilisez le code suivant :

...

Answer 5

Vous pouvez redimensionner en affichant svg dans la balise image et en spécifiant la taille de la balise image c'est-à-dire :