29: SVG-text - CSS-tricks

Anonim

Det finns ett element i SVG. Ingen stor överraskning här: det är för att lägga in text i SVG. Inte konturer av former av bokstäver (även om du kan göra det också) utan faktisk normal webbtext. Valbar, SEO-vänlig, tillgänglig, normal ol webtext.

De teckensnitt du har tillgång till är desamma som resten av dokumentet. Så om du laddar ett @ font-face-teckensnitt kan du använda det i SVG.

Vad jag tycker är coolt är att teckensnittens storlek är relativt SVG-dokumentet, precis som alla former och grejer är. Så om du designar något mycket medvetet och perfekt typografiskt i SVG, kommer det att behålla den integriteten när SVG-storlek ändras. Det skulle vara svårt att dra i HTML / CSS. Här är en artikel om det.

En begränsning: texten kan inte lindas. Det kan vara en ganska betydande nackdel, men den funktionen kommer i SVG 2.