Как встроить файл svg в html

Обновлено: 21.11.2024

В этом руководстве мы обсудим способы добавления изображений SVG на веб-страницу. В отличие от растровых изображений, SVG представляют собой XML-разметку, описывающую формы, линии и заливки, поэтому документ можно использовать различными способами.

В какой-то момент вам захочется встроить прекрасно созданный SVG прямо на веб-страницу. Есть как минимум шесть способов достичь этой цели, но у всех методов есть свои плюсы и минусы.

1. Встраивайте SVG XML прямо в вашу HTML-страницу

Изображение SVG можно добавить в виде островка кода прямо на HTML-страницу с помощью внешних тегов:

Этот метод работает во всех современных браузерах. SVG становится частью DOM страницы, поэтому им можно манипулировать с помощью CSS или JavaScript, возможно, для добавления анимации или реакции на события щелчка. (Обратите внимание, что любой код JavaScript, встроенный в SVG, будет заблокирован.)

Основным недостатком является то, что SVG должен быть встроен в каждую страницу, которая требует его, и может потребоваться повторение для многократно используемых значков. Это увеличивает вес страницы, и, хотя HTML может кэшироваться, код SVG нельзя (легко) повторно использовать в другом месте.

Одним из решений повторяющейся проблемы с изображениями является создание скрытого блока SVG на каждой странице (с отображением CSS: нет ). При желании он может содержать несколько изображений, на которые ссылается идентификатор:

Затем отдельные элементы можно использовать любое количество раз с элементом использования SVG:

Исходному изображению по-прежнему можно придать стиль с помощью CSS, хотя к нему нельзя применить дополнительные стили.

2. Использовать тег

SVG можно добавить на веб-страницу, как и любое другое изображение:

Обычные атрибуты width , height , alt и другие атрибуты могут быть добавлены, если они вам потребуются.

Браузер воспринимает SVG как любое другое изображение. По соображениям безопасности любые скрипты, внешние таблицы стилей, ссылки и другие интерактивные элементы SVG будут отключены.

3. Применение фонового изображения CSS

SVG можно использовать в качестве фона CSS для любого элемента:

Встроенные URI данных с кодировкой UTF8 также могут быть полезны для небольших, регулярно используемых SVG, которые вряд ли будут часто меняться (и сделают недействительной всю таблицу стилей):

При использовании этого метода теги Like, скрипты, ссылки и другие типы интерактивности отключаются.

4. Загрузить в

Браузеры могут отображать документ SVG самостоятельно, поэтому вы можете загрузить изображение в iframe:

Это может быть удобно, если у вас есть переносимый SVG с собственными скриптами и стилями, которые вам нужно изолировать от главной страницы. Однако управление изображением SVG из JavaScript вашей главной страницы станет более сложным, особенно если оно размещено в другом домене.

5. Использовать тег

Тег HTML можно использовать для добавления SVG на вашу страницу:

Запасной текст или изображения можно использовать в блоке аналогично фреймам iframe.

Будут работать стили и скрипты в SVG. Невозможно стилизовать SVG с помощью CSS на HTML-странице, но скрипты могут управлять отдельными элементами:

был наиболее часто используемым вариантом около десяти лет назад, потому что это был единственный надежный способ использования SVG в старых версиях IE.

6. Использовать тег

Я включаю для полноты, но, пожалуйста, не используйте это! Он похож на то, что он встраивает внешний контент в страницу, но был разработан для связи с внешним приложением, таким как плагин для браузера.

После прекращения использования Flash и Silverlight современные браузеры устарели и прекратили поддержку подключаемых модулей браузера. Никогда не полагайтесь на .

Какую технику SVG следует использовать?

Если вы используете SVG в качестве изображения и вам не нужно изменять стиль или добавлять скрипты, тег или фон CSS, возможно, являются лучшим вариантом. Файл можно кэшировать в браузере и повторно использовать на других страницах без дальнейшей загрузки.

Если вам требуется интерактивность, наиболее популярным вариантом является встраивание SVG непосредственно в HTML. Стили и скрипты могут управлять моделью DOM, ссылки можно добавлять в любую фигуру, а сложные фильтры SVG можно применять к другим элементам страницы.

Тег потерял популярность. Тем не менее, этот метод остается жизнеспособным, если вы хотите, чтобы SVG были отдельными и кэшируемыми, но для этого требуется небольшая обработка JavaScript.

Фреймы iframe могут подойти для некоторых проектов, но никогда не используйте их, если вы не испытываете неудовольствия от написания кода для древнего браузера.

Единственная проблема — двойная загрузка, то есть браузер загружает изображение по тегу и другое изображение по тегу, хотя требуется только одно из них, а другое скрыто. Если вы кешируете свои изображения и помечаете эти файлы как кешируемые на своем сервере, по крайней мере, браузер будет загружать эти изображения из кеша, но тем не менее двойную загрузку не остановить, если вы не устраните откат.< /p>

Поддержка SVG с тегами

Обслуживание изображений SVG с использованием тегов объектов по-прежнему несложно, поскольку идентификаторы и классы по-прежнему инкапсулированы в файле SVG и не вызовут проблем при встраивании тегов.

3. Использование встроенного SVG в HTML5

По сути, вы встраиваете все свои коды SVG в свой HTML:

< td>Сжатие GZip / Brotli

Поскольку встроенный SVG встроен в HTML, нет необходимости в другом сетевом запросе для получения файла SVG, поэтому встроенный SVG будет загружаться быстрее всего.

Имейте в виду, что вы по-прежнему будете получать FOUC (Flash нестилизованного контента), поскольку есть вероятность, что ваш встроенный SVG по-прежнему будет ссылаться на внешний шрифт. Чтобы решить проблему FOUC, вам потребуются встроенные шрифты, перечисленные в разделе Использование тега.

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

Кроме того, вы получаете возможность выбирать, выделять и копировать текст в SVG, а также возможность для поисковых систем индексировать этот текст (мы считаем, что для SEO следует полагаться на HTML и оставить SVG отдельно, поэтому мы можем индексировать текст с помощью HTML и индексировать изображения с помощью SVG).

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

Поддержка встроенного встраивания SVG

Встроенное встраивание требует сложного обслуживания. Поскольку все встроено, вам необходимо убедиться, что все идентификаторы и классы уникальны, иначе, если изображение ссылается на элемент использования, градиент или фильтр с повторяющимися идентификаторами, у вас возникнут проблемы с рендерингом.

4. Использование тега

Перечислено здесь для полноты, но НЕ используйте тег. Он не является частью спецификаций HTML, но широко поддерживается во всех браузерах, которые в основном используются для реализации подключаемых модулей Flash.

5. Использование тега

НЕ используйте вместо этого тег. Iframe сложно поддерживать, он не индексируется поисковыми системами и вреден для SEO (поисковая оптимизация).

6. Использование фонового изображения CSS

Это эквивалентно использованию тега и имеет те же преимущества и недостатки.

Сравнение

Поддержка браузеров	Поддерживается во всех основных браузерах, поддерживающих SVG (IE9+).
Атрибуты Alt и title	Нет.
Кэширование браузера	Нет.
Нет.
Интерактивность	Доступно.
Индексирование поисковыми системами	Нет.
Рабочий процесс	Запутанный.

< tr>< /tr>

Встроенный SVG
Поддержка браузера	Хорошо	Хорошо	Хорошо
Атрибуты Alt и title	Да	Нет	Заголовок только
Кэширование браузера	Да	Да	Нет
Сжатие GZip / Brotli	Да	Да	Нет
Интерактивность	Нет	Да	Очень хорошо
Индексирование поисковыми системами	Да	Возврат	Нет
Рабочий процесс	Оптимизированный	Средний	Запутанный
Скорость загрузки	Быстро	Медленнее	Очень быстро
Обслуживание	Просто	Просто	Сложно

Заключение

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

В большинстве случаев мы не рекомендуем встроенный SVG, за исключением предварительной загрузки страниц. Предварительно загружаемые страницы — это содержимое, отображаемое, когда ваше приложение еще не полностью загружено, а поскольку встроенный SVG отображается почти сразу, его можно использовать для отображения изображений или графики в ожидании загрузки приложения.

Векторная графика очень полезна во многих случаях — она имеет небольшой размер файла и хорошо масштабируется, поэтому при увеличении масштаба или увеличении до большого размера она не пикселизируется. В этой статье мы покажем вам, как добавить его на свою веб-страницу.

Предварительные требования:	Вы должны знать основы HTML и знать, как вставить изображение в документ.
Цель:	Научиться встраивать изображение SVG (векторное) в веб-страницу.

Примечание: эта статья не предназначена для обучения SVG; что это такое и как добавить его на веб-страницы.

Что такое векторная графика?

В Интернете вы будете работать с двумя типами изображений — растровыми и векторными:

Растровые изображения определяются с помощью сетки пикселей. Файл растрового изображения содержит информацию, показывающую, где именно должен быть размещен каждый пиксель и какого цвета он должен быть. Популярные форматы веб-растров включают Bitmap (.bmp), PNG (.jpg ), JPEG ( .jpg ) и GIF ( .jpg .)
Векторные изображения определяются с помощью алгоритмов. Файл векторного изображения содержит определения формы и пути, которые компьютер может использовать для определения того, как изображение должно выглядеть при отображении на экране. Формат SVG позволяет нам создавать мощную векторную графику для использования в Интернете.

Чтобы дать вам представление о разнице между ними, давайте рассмотрим пример. Вы можете найти этот пример в нашем репозитории Github под названием vector-versus-raster.html — он показывает два, казалось бы, идентичных изображения рядом, красной звезды с черной тенью. Разница в том, что левый — это PNG, а правый — SVG-изображение.

Разница становится очевидной при увеличении страницы — изображение PNG становится пиксельным при увеличении, потому что оно содержит информацию о том, где должен быть каждый пиксель (и какого цвета). При увеличении каждый пиксель увеличивается в размере, чтобы заполнить несколько пикселей на экране, поэтому изображение начинает выглядеть блочным. Однако векторное изображение по-прежнему выглядит красиво и четко, потому что независимо от его размера алгоритмы используются для обработки форм изображения, причем значения масштабируются по мере увеличения.

Примечание. Изображения выше на самом деле все в формате PNG, где левая звездочка в каждом случае представляет собой растровое изображение, а правая звездочка представляет собой векторное изображение. Опять же, перейдите к демонстрации vector-versus-raster.html для реального примера!

Более того, файлы векторных изображений намного легче, чем их растровые эквиваленты, потому что они должны содержать только несколько алгоритмов, а не информацию о каждом пикселе изображения в отдельности.

Что такое SVG?

SVG — это язык описания векторных изображений на основе XML. Это в основном разметка, как HTML, за исключением того, что у вас есть много различных элементов для определения фигур, которые вы хотите отобразить на своем изображении, и эффектов, которые вы хотите применить к этим фигурам. SVG предназначен для разметки графики, а не содержимого. На самом простом конце спектра у вас есть элементы для создания простых фигур, таких как и . К более продвинутым функциям SVG относятся (преобразование цветов с помощью матрицы преобразования), (анимация частей векторной графики) и (наложение маски поверх изображения).

В качестве простого примера следующий код создает круг и прямоугольник:

Это создает следующий вывод:

Из приведенного выше примера может сложиться впечатление, что SVG легко написать вручную. Да, вы можете вручную закодировать простой SVG в текстовом редакторе, но для сложного изображения это быстро становится очень сложным. Для создания изображений SVG большинство людей используют векторные графические редакторы, такие как Inkscape или Illustrator. Эти пакеты позволяют создавать разнообразные иллюстрации с использованием различных графических инструментов и создавать аппроксимации фотографий (например, функция Trace Bitmap в Inkscape).

SVG имеет некоторые дополнительные преимущества помимо описанных выше:

Текст в векторных изображениях остается доступным (что также положительно сказывается на поисковой оптимизации).
SVG хорошо подходят для стилей/сценариев, поскольку каждый компонент изображения – это элемент, которому можно задать стиль с помощью CSS или сценарий с помощью JavaScript.

Так зачем кому-то использовать растровую графику вместо SVG? Что ж, у SVG есть некоторые недостатки:

SVG может очень быстро усложниться, а это означает, что размеры файлов могут увеличиваться; сложные SVG также могут занимать значительное время в браузере.
Создать SVG может быть сложнее, чем растровые изображения, в зависимости от того, какое изображение вы пытаетесь создать.
SVG не поддерживается в старых браузерах, поэтому может не подойти, если вам нужно поддерживать старые версии Internet Explorer на вашем веб-сайте (SVG начала поддерживаться в IE9.)

Растровая графика, возможно, лучше подходит для изображений сложной точности, таких как фотографии, по причинам, описанным выше.

Примечание. В Inkscape сохраняйте файлы в формате Plain SVG для экономии места. Также ознакомьтесь с этой статьей, в которой описывается, как подготовить файлы SVG для Интернета.

Добавление SVG на ваши страницы

В этом разделе мы рассмотрим различные способы добавления векторной графики SVG на веб-страницы.

Быстрый способ: элемент img

Чтобы встроить SVG через элемент, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут высоты или ширины (или оба, если ваш SVG не имеет внутреннего соотношения сторон).Если вы еще этого не сделали, прочитайте Изображения в HTML.

Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt.
Вы можете легко превратить изображение в гиперссылку, вставив его внутрь элемента.
Файл SVG может кэшироваться браузером, что ускоряет загрузку любой страницы, использующей загруженное изображение в будущем.

Вы не можете управлять изображением с помощью JavaScript.
Если вы хотите управлять содержимым SVG с помощью CSS, вы должны включить встроенные стили CSS в свой код SVG. (Внешние таблицы стилей, вызванные из файла SVG, не действуют.)
Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например, :focus ).

Устранение неполадок и кроссбраузерная поддержка

Для браузеров, не поддерживающих SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG из атрибута src и использовать атрибут srcset (который распознают только последние браузеры) для ссылки на SVG. . В этом случае только поддерживающие браузеры будут загружать SVG — старые браузеры вместо этого будут загружать PNG:

Вы также можете использовать SVG в качестве фоновых изображений CSS, как показано ниже. В приведенном ниже коде старые браузеры будут использовать формат PNG, который они понимают, а новые браузеры будут загружать SVG:

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

Если ваши файлы SVG вообще не отображаются, возможно, ваш сервер настроен неправильно. Если это проблема, эта статья укажет вам правильное направление.

Как включить код SVG в ваш HTML

Вы также можете открыть файл SVG в текстовом редакторе, скопировать код SVG и вставить его в HTML-документ. Иногда это называется встраиванием SVG или встраиванием SVG. Убедитесь, что ваш фрагмент кода SVG начинается с начального тега и заканчивается конечным тегом. Вот очень простой пример того, что вы можете вставить в свой документ:

Этот метод подходит только в том случае, если вы используете SVG только в одном месте. Дублирование требует ресурсоемкого обслуживания.
Дополнительный код SVG увеличивает размер HTML-файла.
Браузер не может кэшировать встроенный SVG, поскольку он кэширует обычные ресурсы изображения, поэтому страницы, содержащие изображение, не будут загружаться быстрее после загрузки первой страницы, содержащей изображение.
Вы можете включить резервный вариант в элемент, но браузеры, поддерживающие SVG, все равно будут загружать любые резервные изображения. Вам нужно взвесить, действительно ли дополнительные накладные расходы оправданы только для поддержки устаревших браузеров.

Как встроить SVG в iframe

Вы можете открывать изображения SVG в своем браузере точно так же, как и веб-страницы. Таким образом, встраивание документа SVG с помощью , выполняется точно так же, как мы изучали в разделе «От к» — другие технологии встраивания.

Вот краткий обзор:

Это определенно не лучший метод:

Как видите, iframe имеет резервный механизм, но браузеры отображают резервный вариант только в том случае, если они вообще не поддерживают iframe.
Более того, если SVG и ваша текущая веб-страница не имеют одинакового происхождения, вы не можете использовать JavaScript на своей основной веб-странице для управления SVG.

Активное обучение: игра с SVG

В этом разделе активного обучения мы предлагаем вам поиграть с SVG для развлечения. В разделе Ввод ниже вы увидите, что мы уже предоставили вам несколько примеров для начала работы. Вы также можете перейти к справочнику по элементам SVG, узнать больше о других игрушках, которые вы можете использовать в SVG, и попробовать их. Этот раздел посвящен отработке ваших исследовательских навыков и получению удовольствия.

Если вы застряли и не можете заставить свой код работать, вы всегда можете сбросить его с помощью кнопки Сброс.

Обзор

Эта статья предоставила вам краткий обзор того, что такое векторная графика и SVG, почему о них полезно знать и как включить SVG на свои веб-страницы. Он никогда не задумывался как полное руководство по изучению SVG, а просто как указатель, чтобы вы знали, что такое SVG, если встретите его в своих путешествиях по сети. Так что не волнуйтесь, если вы еще не чувствуете себя экспертом по SVG. Мы добавили несколько ссылок ниже, которые могут помочь вам, если вы хотите узнать больше о том, как это работает.

В последней статье этого модуля мы подробно рассмотрим адаптивные изображения, рассмотрев инструменты HTML, позволяющие улучшить работу изображений на разных устройствах.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

SVG — это формат изображения для векторной графики. Буквально это означает «масштабируемая векторная графика». В основном то, с чем вы работаете в Adobe Illustrator. Вы можете легко использовать SVG в Интернете, но вам следует многое знать.

Зачем вообще использовать SVG?

Небольшие размеры файлов, которые хорошо сжимаются
Масштабируется до любого размера без потери четкости (кроме очень маленьких)
Отлично смотрится на дисплеях Retina
Управление дизайном, например интерактивность и фильтры.

Подготовка SVG для работы

Создавайте дизайн в Adobe Illustrator. Вот киви стоит на овале.

Обратите внимание, что монтажная область обрезана прямо по краям макета. Холст имеет такое же значение в SVG, как и в PNG или JPG.

Вы можете сохранить файл непосредственно из Adobe Illustrator как файл SVG.

Когда вы сохраните его, вы получите другое диалоговое окно для параметров SVG. Я, честно говоря, мало что знаю обо всем этом. Существует целая спецификация для профилей SVG. Я считаю, что SVG 1.1 работает нормально.

Интересно, что вы можете либо нажать OK и сохранить файл, либо нажать «Код SVG…», и откроется TextEdit (по крайней мере, на Mac) с кодом SVG.

Оба варианта могут быть полезны.

Использование SVG в качестве

Если я сохраню SVG в файл, я смогу использовать его непосредственно в теге.

В Illustrator наша монтажная область была 612 пикселей ✕ 502 пикселей.

Именно таким большим будет изображение на странице, предоставленное самому себе. Вы можете изменить его размер, просто выбрав img и изменив его ширину или высоту, опять же, как вы могли бы PNG или JPG. Вот пример этого:

Использование таким образом имеет собственный набор поддержки конкретных браузеров. По сути: он работает везде, кроме IE 8 и более ранних версий и Android 2.3 и более ранних версий.

Если вы хотите использовать SVG, но вам также необходимо поддерживать эти браузеры, которые не поддерживают использование SVG таким образом, у вас есть варианты. На разных семинарах, которые я проводил, я рассказывал о разных техниках.

Один из способов — проверить поддержку Modernizr и заменить src изображения:

У Дэвида Бушелла есть очень простая альтернатива, если вы не против JavaScript в разметке:

SVGeezy также может помочь. В этой статье мы рассмотрим дополнительные методы отката.

Использование SVG в качестве фонового изображения

Так же просто, как использовать SVG в качестве изображения, вы можете использовать его в CSS в качестве фонового изображения.

Обратите внимание, что мы установили размер фона равным размеру элемента логотипа. Мы должны сделать это, иначе мы просто увидим немного верхнего левого угла нашего гораздо большего исходного изображения SVG. Эти числа учитывают пропорции исходного размера. Но вы можете использовать ключевые слова размера фона, такие как «содержать», если вы хотите убедиться, что изображение подойдет, и не можете знать, что родительское изображение будет точно правильного размера.

Использование SVG в качестве фонового изображения имеет свой особый набор поддержки браузера, но по сути это то же самое, что и использование SVG в качестве изображения. Единственными проблемными браузерами являются IE 8 и более ранние версии и Android 2.3 и более ранние версии.

Еще один умный метод прогрессивного улучшения для использования SVG в качестве фонового изображения – использование его в сочетании с несколькими фонами. SVG и несколько фонов имеют очень похожую поддержку браузеров, поэтому, если браузер поддерживает несколько фонов, он поддерживает SVG, и объявление будет работать (и переопределит любое предыдущее объявление).

Проблема и с фоновым изображением…

Заключается в том, что вы не можете управлять внутренностями SVG с помощью CSS, как двумя следующими способами. Читайте дальше!

Использование встроенного SVG

Помните, как можно получить код SVG прямо из Illustrator при сохранении, если хотите? (Вы также можете просто открыть файл SVG в текстовом редакторе и получить этот код.) Вы можете поместить этот код прямо в документ HTML, и изображение SVG будет отображаться точно так же, как если бы вы поместили его в img.

Если вы используете внутренний язык, который может получить файл и вставить его, вы, по крайней мере, сможете упростить процесс разработки. Нравится:

Небольшой нюанс, связанный с PHP... мне было продемонстрировано, что здесь правильно использовать функцию file_get_contents(), а не include() или include_once(), как я использовал ранее. В частности, потому что SVG иногда экспортируется с этой строкой в качестве открывающей, из-за чего синтаксический анализатор PHP задыхается от нее.

Сначала оптимизируйте

Вероятно, это не сильно шокирует, но SVG, который предоставляет вам Adobe Illustrator, не особенно оптимизирован. У него есть DOCTYPE, заметки генератора и прочий хлам.SVG уже довольно мал, но почему бы не сделать все, что можно? У Питера Коллингриджа есть онлайн-инструмент SVG Optimizer. Загрузите старое, загрузите новое. В видео Кайл Фостер делает все возможное и удаляет разрывы строк после этой оптимизации.

Если вы еще более хардкорный, вот инструмент Node JS, чтобы сделать это самостоятельно.

Теперь вы можете управлять с помощью CSS!

Видите, как SVG очень похож на HTML? Это потому, что они оба по сути являются XML (именованные теги с угловыми скобками и прочим внутри). В нашем дизайне есть два элемента, из которых состоит дизайн: an и an

<р>. Мы можем перейти к коду и дать им имена классов, как и любому другому элементу HTML.

Что еще круче, в SVG есть все эти причудливые фильтры. Например размытие. Вставьте фильтр в свой :

Затем вы можете применить это в своем CSS по мере необходимости:

Вот пример всего этого:

Встроенный SVG имеет собственный набор поддержки браузеров, но опять же, по сути, это проблема только в IE 8 и более ранних версиях и Android 2.3 и более ранних версиях 1 .

Один из способов обработки резервных вариантов для этого типа SVG:

Затем снова используйте Modernizr:

Использование SVG в качестве

Это прекрасно работает с кэшированием и на самом деле имеет более глубокую поддержку, чем при любом другом способе. Но если вы хотите, чтобы CSS работал, вы не можете использовать внешнюю таблицу стилей или файлы .

Внешние таблицы стилей для

И да, если у вас есть встроенный

Спасибо за подробное описание изображений SVG, Крис. Это было очень полезно для меня, так как мы планируем использовать его в некоторых приложениях (только Webkit). Поэтому нам также не нужно беспокоиться о запасных вариантах или несовместимости.

Во-первых, Крис, большое спасибо за статью. Я получил огромное количество знаний.

Я столкнулся с одной «проблемой», которую, возможно, стоит упомянуть, поскольку я не нашел ничего, что бы упоминало о ней. Используя тег и URI данных (чтобы обойти проблему CORS в Chrome, поскольку мне нужен доступ к элементам внутри SVG), Chrome, похоже, теряет возможность отображать любые градиенты.

Не думаю, что я что-то пропустил. :(

Здравствуйте, отличная статья, у меня только одна проблема:

Я думаю, это зависит от моего веб-сервера, но я должен отправить свои материалы на сервер, и я должен быть уверен, что у меня не будет этой ошибки. исправить» эту проблему?

Читайте также: