• 8. March 2021

Jaké výhody přináší nepoužívat jednoduché src="logo.svg"

Vektorová grafika má ve webových technologiích nezastupitelné místo díky nezávislosti velikosti/kvality obrázku na jeho datovém objemu. Nicméně využití jejího plného potenciálu (např. označení jednotlivých částí třídami) vyžaduje ale používání <svg> tagu s celým obshem namísto úsporného "<img src="logo.svg"...>".

Nuxt.JS má pro tyto případy modul @nuxtjs/svg. Pomocí "query" parametru v cestě k SVG souboru při importu lze modulu říct, jaký webpack loader má pro SVG soubor použít (file-loader, url-loader, raw-loader...). File a URL loader fungují tak, jak jsme zvyklí (rozdíl je v tom, zda se SVG propíše do HTML jako odkaz na soubor nebo v base64). Zajímavější je použití vue-svg-loaderu a raw-loaderu.

Tyto loadery umožní načíst soubory jako data pro komponentu (použitelná jako data atribut nebo samostatnou component).

Snímek obrazovky 2021-03-08 195616.png


Snímek obrazovky 2021-03-08 195745.png


SVG pak lze vložit přes v-html atribut.

Snímek obrazovky 2021-03-08 200046.png


Do divu se potom vloží kompletní SVG kód obsahující všechny dodatečné atributy (class, id) a lze s nimi pak libovolně pracovat v JS nebo CSS:

Snímek obrazovky 2021-03-08 200131.png


Více o modulu na https://github.com/nuxt-community/svg-module#readme