Redimensionner SVG en html?

Donc, j'ai un fichier SVG en HTML, et l'une des choses que j'ai entendues à propos du format est qu'il ne se pixellise pas entièrement lorsque vous zoomez dessus.

Je sais qu'avec un jpeg ou quoi que ce soit, je pourrais l'avoir stocké sous forme d'icône 50 par 50, puis l'afficher en fait comme une miniature (plutôt pixélisée) de 100 par 100 (ou 10 par 10), en définissant manuellement la hauteur et la largeur dans l'image_src marque.

Cependant, les fichiers SVG semblent être utilisés avec des balises d'objet / incorporé, et la modification de la hauteur ou de la largeur de CEUX entraîne simplement l'allocation de plus d'espace 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 qu'elle ne soit réellement stockée dans le système de fichiers?

Ouvrez votre .svgfichier avec un éditeur de texte (c'est juste du XML) et recherchez quelque chose comme ça 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.

Essayez ceci:

1. Définissez la zone de visualisation manquante et remplissez les valeurs de hauteur et de largeur des attributs de hauteur et de hauteur définis dans la balise svg

2. Mettez ensuite l'image à l'échelle en réglant simplement la hauteur et la largeur sur les valeurs de pourcentage souhaitées . Bonne chance.

3. Définissez un rapport hauteur / largeur fixe avec preserveAspectRatio="X200Y200 meet(par exemple 200 px), 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">

vous pouvez le redimensionner en affichant svg dans la balise d'image et la balise d'image de taille ie

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

La modification de la largeur du conteneur corrige également ce problème plutôt que de modifier la largeur et la hauteur du fichier source.

.SvgImage img{ width:80%; }

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

Je l' ai trouvé préférable d'ajouter viewBoxet d' preserveAspectRatioattributs à mes SVGs. 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>

Utilisez le code suivant:

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

Voici un exemple d'obtention des limites en utilisant svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

À la fin, vous obtenez des numéros que vous pouvez brancher sur le svg pour définir correctement la zone de visualisation. Ensuite, utilisez n'importe quel css sur le div 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);

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

Les graphiques SVG, comme les autres œuvres créatives, sont protégés par la loi sur les droits d'auteur dans la plupart des pays. En fonction de la juridiction, de la licence de l'œuvre ou du fait que vous soyez ou non le titulaire des droits d'auteur, vous ne pourrez peut-être pas modifier le 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 faire la merde. Par conséquent, vous pouvez ajuster l'échelle du graphique sans modifier le travail lui-même en utilisant la imgbalise avec widthattribut dans votre HTML.

Utilisation d'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 URI de données :

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

Les SVG peuvent être optimisés pour les URI de données afin de créer des images SVG Favicon 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">