16: Система значков SVG - внешний источник - CSS-хитрости

Размещение блока SVG defs в верхней части документа определенно работает. Он также имеет некоторые преимущества, например, тот факт, что не нужно делать HTTP-запрос, вся информация для рисования графики находится прямо на странице. Но есть и недостатки. Вся эта информация должна быть проанализирована браузером на каждой странице документа. Это не отдельный документ, который может быть уже кэширован клиентом, как другие активы. И, говоря о кешировании, если ваш сайт кэширует HTML (обычно это хорошая идея), вы можете рассматривать это «раздувание кеша страницы», потому что каждая отдельная кешированная страница включает в себя этот большой повторяющийся блок кода - не очень эффективное использование кеша сервера.

Хорошая новость заключается в том, что мы можем переместить блокировку SVG defs во внешний файл и использовать его так же, как изображение или любой другой ресурс.

Когда мы используем его тогда, путь к файлу будет в атрибуте, например:

Важно знать: здесь жесткие междоменные ограничения. По моему опыту, даже заголовки CORS не помогут вам. Так что никаких CDN (невозможно даже воспроизводить на CodePen и определенно нельзя воспроизводить по URL-адресу file: //).

Еще одна важная вещь, которую следует знать: вам определенно нужен атрибут xmlns, чтобы это работало. Как и в случае, ваш блок SVG defs должен начинаться с:

У меня создалось впечатление, что вам это не нужно в документе HTML5 (примерно так же, как вам не нужны типы в s), но, возможно, потому, что этот файл больше не находится в пределах документа HTML5 (это ссылки извне), вам это нужно.

По этой причине демо для этого здесь.

Не менее важно знать: ни одна версия IE не поддерживает это (до 11 на момент публикации). Но есть способ заставить его работать, по сути, используя Ajaxing в той части SVG, которая вам нужна, и вставляя ее там, где должно быть, что делает его своего рода «нормальным» встроенным SVG, который поддерживается. У нас уходит горячая минута, чтобы заставить это работать и протестировать в Internet Explorer с помощью BrowserStack, но в конечном итоге мы это получаем.