Характеристики на SVG дизайна • За CSS
Възможности за стайлинг на SVG
Външният вид на SVG елементи може да бъде зададен както с помощта на CSS, така и с помощта на SVG филтри, градиенти и модели - те могат да бъдат записани в елементи директно в кода или също да бъдат зададени с помощта на CSS.
Стилове и скриптове могат да бъдат зададени във SVG файла, но ако искаме едно и също изображение да изглежда различно при различни условия - стиловете във файла не са подходящи - трябва да имаме векторното съдържание за външни стилове.
От всички начини за вмъкване на SVG само два са подходящи за това: шрифт на икона или вграден SVG в HTML (най-удобният начин да направите това е чрез използване).
Какви визуални стилове мога да използвам за шрифтове на икони? Можете да зададете цвят, да добавите сенки и анимация:
Вижте писалката LnJEK от yoksel (@yoksel) на CodePen.
Не много в сравнение с възможностите, предоставени от SVG.
За SVG изображения можете да използвате SVG градиенти и филтри като размазване или сенки. Можете също така да използвате модели и изображения като щрихи и запълване, а също така можете да рисувате отделни части от изображения и по този начин да получавате многоцветни икони.
Когато SVG се вмъкне чрез употреба, иконите стават достъпни за стиловете на страниците и всички тези прекрасни функции могат да бъдат контролирани чрез външен CSS.
Ето пример за икони с модели като фон:
Примерът е малко див, но показва добре, че всяка снимка може да бъде фон. Шаблоните се задават в кода на страницата и се свързват с помощта на CSS.
Ето кода за модела на дървото:
Можете да поставите всичко в шаблона: комбинации от фигури, обекти с градиенти, текст ... Вярно е, има подозрение, че сложният фон може да има лош ефект върху производителността на страницата, но не направих никакви тестове.
За да смените хода и да го запълните при нанасяне, трябва да добавите още няколко реда:
Можете също така да направите интересни ефекти, базирани на инсулт:
Щрихите могат да бъдат пунктирани, можете да използвате градиент или шаблон за тях.
Иконите в последния ред имат градиент, който преминава към прозрачност като щрих, по някаква причина не работи в последната опера.