301 прочтение · 1 год назад
6 распространенных ошибок SVG (и как их исправить)
Кто-то недавно спросил меня, как я подхожу к отладке встроенных SVG. Поскольку это часть DOM, мы можем проверить любой встроенный SVG в любом браузере DevTools. И благодаря этому у нас есть возможность оценить ситуацию и выявить любые потенциальные проблемы или возможности для оптимизации SVG. Но иногда мы вообще не можем видеть наши SVG. В этих случаях есть шесть конкретных вещей, на которые я обращаю внимание при отладке. 1. Значения viewBox viewBox часто вызывает путаницу при работе с SVG. Технически...
70 прочтений · 6 лет назад
Как работает SVG ID?
Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов. Перевод статьи «How SVG Fragment Identifiers Work» от Криса Койера. Но <use> — это инлайновый SVG. Он не поможет, если вы хотите использовать часть SVG в теге <IMG> или в background-image...