29: SVG-tekst - CSS-trucs

Anonim

Er is een element in SVG. Geen grote verrassing hier: het is om tekst in de SVG te plaatsen. Geen contouren van vormen van letters (hoewel je dat ook kunt doen) maar echte normale webtekst. Selecteerbare, SEO-vriendelijke, toegankelijke, normale oude webtekst.

De lettertypen waartoe u toegang hebt, zijn dezelfde als de rest van het document. Dus als u een @ font-face-lettertype laadt, kunt u dat in de SVG gebruiken.

Wat ik cool vind, is dat de grootte van de lettertypen relatief is ten opzichte van het SVG-document, net als alle vormen en zo. Dus als u iets heel opzettelijk en perfect typografisch ontwerpt in de SVG, zal het die integriteit behouden terwijl de grootte van de SVG wordt aangepast. Dat zou moeilijk te realiseren zijn in HTML / CSS. Hier is een artikel over.

Een beperking: de tekst kan niet omlopen. Dat kan een behoorlijk groot nadeel zijn, maar die functie komt in SVG 2.