Jak změnit velikost obrázku SVG formátu

Změnit velikost obrázku u SVG formátu je poměrně náročná, protože SVG funguje zcela odlišně než formáty .png, .jpg, .bmp apod. Osobně tento formát nemám rádi, ale co nám zbývá, když je to jediný formát ve světě webů, který umí zobrazit obrázky velikostně menší a bez ztráty kvality.

Co to je SVG formát?

Formát SVG je zkratka a pokud by vás to zajímalo, tak její celý název je „Scalable Vector Graphic“. Je to dvojrozměrná vektorová grafika, která vznikla v roce 2001, ale například WordPress začal formát podporovat až teprve nedávno. Díky SVG můžeme formát vložit v podobě kódu do HTML webové stránky, která vykreslí grafiku. To žádný jiný formát neumí. Jako vektorová grafika neobsahuje pixely, ale grafické objekty. Velkou výhodou je, že je otevřený, snadno přenositelný, elementy umí seskupovat a má možnost mít více vrstev pod sebou.

Tento formát se nejčastěji u webových stránek používá v podobě logotypů, faviconů, ikonek a jednoduchých obrázků. Vzhledem k tomu, že naše studio pracuje se SVG každý den, je pro nás nutností s formátem umět pracovat. Každý grafický designér dnes všechny ikonky webu dodává v SVG formátu a nikoliv v PNG nebo JPG.

Jak změnit velikost obrázku ve formátu SVG?

Je to poměrně jednoduché, ale nemusí to vždy fungovat. Bude stačit pokud si otevřete svůj vlasti SVG kód v nějakém textovém editoru.

<svg width="120px" height="220px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Jak vidíte na ukázce nahoře, tak zde je definována šířka a výška. Takže stačí pokud výšku, šířku změníte a je to. Jenže jak už jsme psali. Tohle nemusí fungovat, zvláště pokud obrázek uvnitř formátu není editovatelný. Co tedy s tím? Budeme muset vsadit na CSS a napsat například toto:

i { 
     background-size: 30px 70px;
}

Doufáme, že pro vás byl článek užitečný. Měl by být, protože pokud jste začínající frontend developer, tak toto je jedna z důležitých věcí, co musíte umět.