Обеспечение лучшей резервной поддержки SVG и управление оформлением с помощью элемента <picture>
Перевод статьи Better SVG Fallback and Art Direction With The <picture> Element с сайта http://sarasoueidan.com/, автор — Сара Суэйдан.
Помимо использования SVG в CSS в качестве фонового изображения, вы можете использовать SVG и для изображений в контенте HTML с помощью одной из нескольких техник для их встраивания. Каждая из них имеет свои преимущества и сценарии использования. Если вам не нужна интерактивность или возможность подключения внешних стилей, стандартным способом загрузки SVG-изображения будет тег <img>, но у него есть один недостаток: на сегодняшний день для создания запасных вариантов изображений и/или для управления оформлением страницы необходимо использовать JavaScript. В этой статье мы поговорим о лучшем методе для достижения этой цели: с помощью элемента <picture>.
Перед вами не учебник по использованию <picture>. На просторах интернета существует множество ресурсов со всей информацией, которую нужно знать об этом элементе. Поэтому если вы с ним не знакомы, обратитесь к последнему разделу этой статьи – там вы найдете список ресурсов, чтобы узнать всё, что необходимо. С другой стороны, эта статья не требует от вас особых навыков работы с <picture>. Как вы сами сможете убедиться, все примеры в ней в большинстве своём понятны без разъяснений.
