web-dev-qa-db-fra.com

Redimensionner SVG en HTML?

Donc, j'ai un fichier SVG en HTML, et l'une des choses que j'ai entendu dire au sujet du format, c'est qu'il n'est pas tout pixelisé lorsque vous zoomez dessus.

Je sais qu'avec un jpeg ou tout ce que je pourrais avoir stocké sous forme d'icône 50 x 50, puis l'affiche sous forme de vignette (plutôt pixellisée) 100 x 100 (ou 10 par 10), en définissant manuellement la hauteur et la largeur dans l'image_src étiquette.

Cependant, les fichiers SVG semblent être utilisés avec des balises object/embed et, si vous modifiez la hauteur ou la largeur de THOSE, vous allouez plus d'espace à l'image.

Existe-t-il un moyen de spécifier que vous voulez une image SVG plus petite ou plus grande que celle stockée dans le système de fichiers?

htmlsvg
138
Jenny

Ouvrez votre fichier .svg avec un éditeur de texte (XML uniquement) et cherchez quelque chose comme cela en haut:

<svg ... width="50px" height="50px"...

Effacer les attributs de largeur et de hauteur; les valeurs par défaut sont 100%, il devrait donc s’étendre à tout ce que le conteneur le permet.

154
Amadan

Essayez ces:

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

  2. Puis redimensionnez l'image simplement par en réglant la hauteur et la largeur aux valeurs pourcentage souhaité. Bonne chance.

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

par exemple.

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">
43
Lorenz Lo Sauer

vous pouvez le redimensionner en affichant svg dans la balise image et la taille de la balise image i.e.

<img width="200px" src="lion.svg"></img>
20
Tanveer

Changer la largeur du conteneur le corrige également plutôt que de changer la largeur et la hauteur du fichier source.

.SvgImage img{ width:80%; }

Cela corrige mon problème de redimensionnement svg. vous pouvez donner n'importe quel% en fonction de vos besoins.

9
user2929588

Voici un exemple d'obtention des bornes avec svg.getBox(): https://Gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

À la fin, vous obtenez des numéros que vous pouvez insérer dans le fichier svg pour définir correctement la zone de visualisation. Ensuite, utilisez n'importe quel css sur la division parent et vous avez terminé.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);
3
Lawrence Whiteside

Utilisez le code suivant:

<g transform="scale(0.1)">
...
</g>
2
Chris P

J'ai trouvé préférable d'ajouter les attributs viewBox et preserveAspectRatio à mes SVG. La zone de visualisation doit décrire la largeur et la hauteur complètes du SVG sous la forme 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>
1
duhaime

J'ai un fichier SVG en HTML [....] IS n'y a-t-il aucun moyen de spécifier que vous voulez une image SVG 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 détenteur des droits, vous ne pourrez peut-être pas modifier le fichier SVG sans enfreindre la loi sur les droits d'auteur , croyez-le ou non.

Mais les lois sont des sujets délicats et parfois, vous voulez juste vous faire foutre. Par conséquent, vous pouvez ajuster l'échelle du graphique sans modifier le travail lui-même à l'aide de la balise img avec l'attribut width dans votre code HTML.

Utiliser une requête HTTP externe pour spécifier la taille:

<img width="96" src="/path/to/image.svg">

Spécification de la taille dans le balisage à l'aide d'un RI des données :

<img width="96" src="data:image/svg+xml,...">

Les SVG peuvent être Optimisé pour les URI de données pour créer Favicon SVG images adaptées à toutes les tailles:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">
0
Josh Habdas