У меня есть файл svg, который я создал в Illustrator и состоит из шаблона, созданного с помощью инструмента Swatch. Когда я пытаюсь загрузить его локально, в браузере он отображается пустым.
Вот файл, если вы хотите его протестировать: http://d.pr/ZvhV
Если вы обнаружите, что он работает в Firefox, IE или Edge, но не в Chrome, это тоже была моя проблема.
Я исправил это, открыв файл .SVG в текстовом редакторе, и везде я видел этот тег: xlink:href="data:img/png;base64
Я заменил его на xlink:href="data:image/png;base64
Это исправило это, и оно сразу отобразилось. Надеюсь, это кому-нибудь поможет!!
Браузеры имеют разные уровни поддержки SVG, поэтому ваш браузер может просто не поддерживать шаблоны.
Если это часть веб-сайта, я бы просто экспортировал его в формате PNG, так как векторное изображение такого размера в любом случае будет тормозить компьютеры посетителей.
Надеюсь, вы разобрались с этим, но для всех, у кого возникла эта проблема: проверьте настройки сохранения в формате .svg в Illustrator.
Стандартные настройки дали мне пустой .svg, но когда я запутался с настройками (Тип шрифта: SVG, Свойства CSS: Атрибут стиля, Выводить меньше элементов без флажка, Включить XMP), все работало нормально.
С другой стороны, использование .svg на веб-сайте допустимо, если у вас есть запасной вариант для браузеров, которые их не поддерживают. Я полагаю, что modernizr (http://modernizr.com/) покрывает эту настройку.
