Hur man gör SVG-bildkod responsiv

För ett bildformat som har oändlig skalbarhet kan SVG vara ett förvånansvärt svårt format att göra responsivt: vektorbilder anpassar sig inte till storleken på visningsporten som standard.

Gör en responsiv SVG-bild

Som en bildkan du göra en SVG vektorillustrationsskala med sidinnehållet som du skulle göra med alla andra:

Även om detta fungerar i många fall, räcker det ibland inte, särskilt om du försöker bädda in SVG-illustrationen genom att ange koden direkt på sidan. I så fall fungerar det inte att helt enkelt ändra bredden och höjden på elementet.

Göra Inline SVG Responsive

Efter att ha klistrats in i i ett HTML-dokument kommer inbäddad SVG-kod vanligtvis att se ut ungefär så här:

Med

Att ta bort de flesta av de redundanta elementattributen

Omge först SVG-koden med en

och lägg till ett preserveAspectRatio-attribut och en klass till

Det flyttar SVG-illustrationen till toppen av dess displaybehållare.

.svg-container { display: inline-block; position: relativ; bredd: 100%; stoppning-botten: 100%; vertikal-align: mitten; overflow: gömd; }

Observera att bredden som används i CSS förutsätter att du vill att SVG-bilden ska vara hela sidans bredd (eller åtminstone dess överordnade behållare). Mängden vaddering-botten representerar ett förhållande mellan SVG-illustrationens höjd och bredd. Att dividera höjden på dokumentets viewBox med dess bredd ger ett förhållande på 1:1 i det här fallet, vilket innebär att padding-bottom bör ställas in på 100 %. Om SVG-bilden var bredare än den var hög, säg 1:2, skulle utfyllnadsbotten vara inställd på 50 % .

Slutligen, placera SVG inuti behållaren med lite mer CSS:

.svg-content { display: inline-block; position: absolut; topp: 0; vänster: 0; }

Detta ger en lösning där SVG-illustrationen kan skala elegant på sidan utan att störa annat innehåll; samma kod kommer att fungera på en