Что нам стоит SVG заинлайнить?

Давеча случилось интересное. Сел я, значит, после ужина «ещё чуть-чуть поработать и потом сразу спать». По задаче нужно было заинлайнить некоторое количество SVG в HTML, дабы потом переиспользовать по всему проекту. Если вы работали с SVG, то понимаете, почему, для чего и как. Если нет, то в текущем контексте причины не столь важны.

Инлайнил, значит, как деды завещали:

//- inlined svg symbols
svg(style="display: none")
  defs
    symbol(id="sample-icon", viewBox="0 0 32 32")
      path(..)
      path(..)
      path(..)

//- trying to use
svg
  use(xlink:href="#sample-icon")

Иии.. ничего. Просто пусто. Первый блок, естественно, вообще не показывается, а второй просто пустой. Не веря своим глазам переписываю это в HTML (вдруг где-то в Jade что-то не так работает). Снова ничего.

Окей, создаю обычный HTML-файл, закидываю туда — всё работает. Мистика.

И дальше прям закрутилось. Начинаю грешить на стили. Удаляю все через инструменты разработчика. Ничего. Удаляю прям из сборки. Тоже ничего. Удаляю вообще всё из тела используемого шаблона. Что? А снова ничего.

Помимо SVG в теле документа только бандл Ангуляра. «Да ладно?» — думаю я. Выпиливаю его.. и снова ничего.

Окей, начал грешить на то, что проект сервится как-то по-особенному (localhost:8080 и это вот всё). Засервил только так же обычный index.html — SVG есть. На часах пять часов утра, ушёл спать.

С утра начинаю снова это пилить. Гугл подкидывает вариант, один из которых, какой-то древний баг в Хроме, который, мол, ещё не пофиксили Фиксики. Но у меня-то это все нигде не работает. Причём, если просто в файлике — работает, а в проекте тот же код отказывается работать. И основной симптом, который мне кажется странным — тег use в отладке показывается размером в 0px, что как бы намекает нам на то, что в нём ничего нет.

Ещё полтора часа поисков и, о чудо!, случайно натыкаюсь на нужное. Оказывается (и это в общем-то очевидно), если в заголовке страницы есть тег base, то все относительные пути (в том числе и атрибут xlink:href, естественно) будут вычисляться от него.

У нас он конечно же есть. И путь, который он задаёт, естественно, не соответствует действительности. Но менять его было нельзя, т. к. от этого зависят другие ресурсы. Решением было проставление полного пути в качестве ссылки на используемый symbol.

— Пфф, чо тут? СВГшки заинлайнить? Да ща, десять минут и готово.

Люблю свою работу.

2016
1 комментарий
вася раков

автору зачёт. пешы ищё

Популярное