Применение CSS стилей к SVG через тег object

Быстрый ответ

CSS может стилизовать встроенный SVG так же, как это делается с обычным HTML. Вот пример:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: red;" />
</svg>

Здесь круг приобретает красный цвет с помощью стиля, прописанного прямо в SVG-разметке.

Методы стилизации внедренного SVG

В зависимости от способа использования SVG в HTML существуют разные пути его стилизации. Давайте разберём их.

Метод 1: Добавление стиля через JavaScript

Если SVG внедряется с помощью тегов <img> или <object>, его стилизация через внешний CSS может быть затруднена из-за границ между документами. В таком случае стили можно применить или подключить внешний CSS с использованием JavaScript после полной загрузки изображения:

document.querySelector('img#mySVG').addEventListener('load', function() {
  const svgDoc = this.contentDocument;
  const style = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  style.textContent = `circle { fill: blue; }`; // Добавляем синий цвет, любимый у Пикассо
  svgDoc.querySelector('svg').appendChild(style); // Вуаля, магия в действии!
});

Подробнее об этом расскажет наш спикер на видео

Метод 2: Использование пользовательских элементов и Теневого DOM

Можно создать собственный SVG-элемент и защитить его стили с помощью Теневого DOM, используя customElements.define(). Пример ниже демонстрирует это:

class CustomSvgElement extends HTMLElement {
  connectedCallback() {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    // Вставляем SVG и стили как настоящие граффити-артисты
    this.shadowRoot.appendChild(svg);
  }
}
customElements.define('custom-svg', CustomSvgElement); // И вуаля, искусство перед вами!

Метод 3: Использование внешних библиотек (SVGInject)

Специальные библиотеки, например, SVGInject, помогают упростить стилизацию SVG. Вот как это выглядит на практике:

<img src="image.svg" onload="SVGInject(this)" /> <!-- Вставляем, стилизуем и доводим до совершенства -->

Визуализация

Представьте, что у вас есть картина (🖼️), и вы хотите придать ей особый шарм. SVG – это наш полотно, но пока оно выглядит бледно. Используем стилизацию, чтобы привнести жизнь:

SVG без стиля (🖼️): 
Блеклое и невзрачное.

Стлизованное CSS SVG (🖼️🎨): 
Сияет, притягивает взгляд, невозможно игнорировать.

С помощью CSS мы можем заставить наши SVG сиять:

<svg>
  <!-- Оригинальное SVG -->
</svg>
<style>
  svg { fill: blue; } /* 💡 Дарим нашему SVG новую жизнь */
</style>

Теперь наше SVG сияет в виртуальной галерее:

До: [🖼️]
После: [🖼️💡]

Продвинутые приемы стилизации SVG

Ниже приведены методы, которые помогут вам поднять ваше мастерство работы со SVG на следующий уровень. Готовы стать настоящими мастерами стилизации?

Прием 1: SVG CSS с применением '@import'

С помощью команды @import можно хранить стили SVG отдельно и в надлежащем порядке:

<svg>
  <style>
    @import url('external-styles.css'); // Импортируем стили как настоящий VIP
  </style>
</svg>

Прием 2: Избегаем перезаписи атрибутов

Встроенные атрибуты SVG, такие как fill, могут переопределить CSS. Чтобы предотвратить это, лучше убрать такие атрибуты:

// Используем JavaScript для удаления атрибута 'fill' и втом же времени вставляем SVG в DOM

Прием 3: Обрабатываем SVG в <object> и <iframe>

Для SVG, используемого с <object> или <iframe>, стили можно применить напрямую, вставляя их или таблицы стилей через contentDocument:

const objectEl = document.querySelector('object#embeddedSvg');
objectEl.addEventListener('load', () => {
  const svgDoc = objectEl.contentDocument;
  const styleElement = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
  styleElement.textContent = '/* SVG стили готовы к работе! */';
  svgDoc.documentElement.appendChild(styleElement); // И действуйте!
});

Полезные материалы

1. SVG и CSS – SVG: Scalable Vector Graphics | MDN — глубинные знания о SVG и CSS от MDN.
2. Использование SVG | CSS-Tricks — фундаментальное изучение всех аспектов SVG и CSS от CSS-Tricks.
3. Стилизация и анимация SVG с помощью CSS — Smashing Magazine — красочный мир SVG от Smashing Magazine.
4. [Inline SVG против иконок-шрифтов [CAGEMATCH] | CSS-Tricks](https://css-tricks.com/icon-fonts-vs-svg/) — сравнение встроенных SVG и иконок-шрифтов от CSS-Tricks.
5. Практическое руководство по использованию SVG в вебе — ориентир по стильному использованию SVG в интернете.
6. Понимание систем координат и преобразований SVG (Часть 1) — Сара Соуейдан — мудрые уроки от Сара Соуейдан о системах координат и преобразованиях SVG.
7. Масштабируемая векторная графика (SVG) 2 — детальная спецификация SVG от W3C.