Řešení: Vlastní výřezy obrázků pomocí SVG

Mám fotku a chci ji udělat specifický výřez v přímo v kódu. Pomocí CSS snadno zařídím kulatý, jenže co vlastní tvar?

Po čase pro vás mám další z příkladů, které jsem ukazoval na přednášce „10 praktických CSS3 a SVG řešení“ na Webexpo 2016.

Vlastní výřez pomocí SVG

Možností je víc, ale když chci, aby to fungovalo prakticky ve všech prohlížečích, zvolím SVG. Výřez nezvládne jen Internet Explorer 8 a starší. Ale uděláme pro ně docela vyčůrané náhradní řešení, vydržte.

1) Nejdříve fotka v SVG

<svg>
  <image xlink:href="image.jpg" 
    alt="Image">  
</svg>

Namísto prostého <img> použijeme SVG obrázek, abychom na něj mohli aplikovat tvar masky.

2) Definuji tvar výstřižku

<clipPath id="clip-path">
  <path d="…">
</clipPath>

Všimněte si, že zde nepoužívám zanoření do <defs>, oblasti pro vymezení později využívaných objektů. Nefungovalo by to totiž v aktuálních verzích Safari.

3) Výstřižek pak na obrázek nasadím

<image clip-path="url(#clip-path)" …>

A máme skoro hotovo. Nic složitého, že? Ještě trochu vysvětlování a pak ten fallback pro starší prohlížeče.

Nasazení ořezového tvaru (clip-path) dělám přímým parametrem v SVG kódu. Proč jsem nepoužil CSS vlastnost clip-path, která je také standardně k dispozici? Opět kvůli Safari, které ji zatím neumí.

Na obrázku nahoře jste mohli vidět, že jsem si v grafickém editoru naklikal něco jako metalový šestiúhelník.

Vaše maska může pochopitelně vypadat jak chcete vy: trojúhelník, srdce nebo třeba obrys nosu vašeho šéfa. Proti gustu žádný dišputát. A jasně, tvar i obrázek v něm můžete třeba animovat po najetí myši.

Řešení bude fungovat ve všech dnes vyráběných prohlížečích. Ve starých bez podpory SVG obrázek ani ořez neuvidíte.

4) Víte, že prohlížeče znají <image>? Postavíme na tom náhradní řešení pro staré Explorery

Mohli bychom pro ně přidat SVG fallback pomocí značky <desc>:

<desc>
  <img src="image.jpg" alt="…">
</desc>  

Ale neuděláme to. Prohlížeče se totiž tváří, že značku <image> znají, i když by ji znát neměly. Přeborníkem v tomto je, chválabohu, právě Explorer. Náš <image> uvnitř <svg> považuje za <img>, kterému jsme zapomněli přidat parametr src. Švanda, což? To nám ale umožní vrátit se na začátek a udělat vtipně jednoduchý fallback:

<svg>
  <image 
    xlink:href="image.jpg" 
    src="image.jpg" 
    …>  
</svg>

Tady je živá ukázka: cdpn.io/e/jrPpdO.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii SVG.

Responzivní SVG

26. 6. 2017 v příručce

Další ukázka z e-booku „Vzhůru do (responzivního) webdesignu“. Jak bez hacků zařídit pružné zobrazování SVG ve všech prohlížečích? A jak na plně responzivní SVG s přizpůsobivým obsahem?

SVG řešení: hvězdičkové hodnocení

15. 3. 2017 v příručce

Hvězdičkové hodnocení se na webu používá děsně často. Před časem jsem kápl na moc pěkné řešení postavené na SVG vloženém do HTML.

Veřejná školení

SVG

SVG

Scalable Vector Graphics přináší do tvorby uživatelských rozhraní jednu z největších inovací za posledních deset let. Příští termín: 19. října.

14. září Mistrovský vývoj webů na WordPressu
27. září Dnešní webová kodéřina
5. října Optimalizace rychlosti načítání
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací