Ridimensionare SVG in HTML?

Quindi, ho un file SVG in HTML e una delle cose che ho sentito parlare del formato è che non viene tutto pixelato quando lo ingrandisci.

Conosco un jpeg o qualunque cosa avrei potuto archiviarlo come un'icona 50 per 50, quindi in realtà visualizzarlo come una miniatura (piuttosto pixelata) 100 per 100 (o 10 per 10), impostando manualmente l'altezza e la larghezza in image_src etichetta.

Tuttavia, i file SVG sembrano essere utilizzati con i tag object / embed e la modifica dell'altezza o della larghezza di THOSE comporta solo l'allocazione di più spazio per l'immagine.

Esiste un modo per specificare che si desidera che un'immagine SVG venga visualizzata più piccola o più grande di quella che è effettivamente memorizzata nel file system?

Apri il tuo .svgfile con un editor di testo (è solo XML) e cerca qualcosa di simile in alto:

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

Cancella gli attributi di larghezza e altezza; le impostazioni predefinite sono al 100%, quindi dovrebbe estendersi a qualunque cosa il contenitore lo consenta.

Prova questi:

1. Imposta il riquadro di visualizzazione mancante e inserisci i valori di altezza e larghezza degli attributi altezza e altezza impostati nel tag svg

2. Quindi ridimensionare l'immagine semplicemente impostando l'altezza e la larghezza sui valori percentuali desiderati . In bocca al lupo.

3. Impostare un rapporto di formato fisso con preserveAspectRatio="X200Y200 meet(es. 200px), ma non è necessario

per esempio

 <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">

puoi ridimensionarlo visualizzando svg nel tag immagine e tag dimensione immagine cioè

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

La modifica della larghezza del contenitore consente inoltre di risolverlo anziché modificare la larghezza e l'altezza del file di origine.

.SvgImage img{ width:80%; }

Questo risolve il mio problema di ridimensionamento svg. puoi dare qualsiasi% in base alle tue esigenze.

Ho trovato la cosa migliore da aggiungere viewBoxe preserveAspectRatioattributi ai miei SVG. Il riquadro di visualizzazione dovrebbe descrivere l'intera larghezza e altezza dell'SVG nel formato 0 0 w h:

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

Usa il seguente codice:

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

Ecco un esempio di come ottenere i limiti usando svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Alla fine ottieni numeri che puoi inserire in svg per impostare correttamente la viewbox. Quindi utilizzare qualsiasi CSS sul div genitore e il gioco è fatto.

 // 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);

Ho un file SVG in HTML [....] Esiste un modo per specificare che si desidera che un'immagine SVG venga visualizzata più piccola o più grande di quella che è effettivamente memorizzata nel file system?

La grafica SVG, come altre opere creative, è protetta dalla legge sul copyright nella maggior parte dei paesi. A seconda della giurisdizione, della licenza dell'opera o del fatto che tu sia il detentore del copyright, potresti non essere in grado di modificare SVG senza violare la legge sul copyright , che ci crediate o no.

Ma le leggi sono argomenti difficili e a volte vuoi solo fare merda. Pertanto è possibile regolare la scala della grafica senza modificare il lavoro stesso utilizzando il imgtag con l' widthattributo all'interno del proprio HTML.

Utilizzo di una richiesta HTTP esterna per specificare la dimensione:

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

Specifica della dimensione nel markup utilizzando un URI dati :

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

Gli SVG possono essere ottimizzati per gli URI dei dati per creare immagini SVG Favicon adatte a qualsiasi dimensione:

<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">