Не работает svg файл
Обновлено: 05.07.2024
Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.
| Навыки: | Знание основ HTML и умение добавлять изображение в веб-документ. |
|---|---|
| Цель: | Изучить как встроить 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 предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как <circle> (круг) и <rect> (прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (en-US) (разложение цвета с использованием матрицы), <animate> (анимация частей вашего векторного изображения) и <mask> (en-US) (применение маски к изображению.)
В качестве простого примера, следующий код создаёт круг и прямоугольник:
В результате получается следующее:
Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)
Дополнительные преимущества SVG:
- Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает SEO).
- SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.
Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:
- SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
- SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
- не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.
В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.
Примечание: В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на статью, описывающую как подготовить SVG изображение для веб-документа.
Добавление SVG на страницы
В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.
Быстрый путь: <img>
Чтобы встроить SVG используя элемент <img> , вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.
Плюсы
- Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте alt
- Вы можете легко превратить изображение в гиперссылку, поместив <image> в элемент <a> .
Минусы
- Вы не можете изменять изображение с помощью 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:
Подобно методу <img> , описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.
Как включить SVG в ваш HTML код
Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
Плюсы
Минусы
- Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
- Дополнительный SVG код увеличивает размер вашего HTML файла.
- Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения .
- Вы можете добавить альтернативный вариант в элементе <foreignObject> , но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).
Как встраивать SVG при помощи <iframe> (en-US)
Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <iframe> выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.
Вот краткий обзор:
Это - определённо не самый лучший метод для выбора:
Минусы
- Как вы можете видеть, у iframe -ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают iframe -ы.
- Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.
Активное изучение: поиграйте с SVG
В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области Input, вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить SVG Element Reference, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.
Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку Reset.
Заключение
Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.
В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.
Ребята столкнулся с проблемой по SVG, файлы попросту не отображаются, при этом консоль не ругается, адреса в коде актуальные но само отображение не происходит.
кто то может подсказать, в чем может быть трабл? куда копать то?
ЗЫ: хайд какой-то странный =)
Изменено 14 марта 2016 пользователем BogusUA
Ссылка на комментарий
2 ответа на этот вопрос
Похожие публикации
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
JS:
function openForm() document.getElementById("IconForm").style.display = "block";
>
function closeForm() document.getElementById("IconForm").style.display = "none";
return false;
>
function drawIcon(bc, bg, fc, text) var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";
svg += text + "</text></svg>";
alert(svg);
document.getElementById('Dragon').innerHTML += svg;
return true;
>
function acceptArgs() <
var bc = document.getElementById("select_bc");
bc = bc.options[bc.selectedIndex].value;
var bg = document.getElementById("select_bg");
bg = bg.options[bg.selectedIndex].value;
var fc = document.getElementById("select_fc");
fc = fc.options[fc.selectedIndex].value;
var text = document.getElementById("text_in").value;
closeForm();
drawIcon(bc, bg, fc, text);
у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить css свойство для этого
Какие есть еще идеи?
Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.
Форматов для изображений существует очень много, но все они делятся на два больших класса – растровые и векторные. Первые в основном используются для различной сложной и детальной графики, например, фотографии. В них каждый пиксель – мельчайший элемент – может иметь собственный цвет, и в файле, в общем, просто сохраняются цвета для каждой точки изображения. Конечно, используются разные методы, чтобы сжать размер информации, и от этого происходит много растровых форматов – BMP, PNG, IPG и прочие. Обычно наилучшую эффективность показывает IPG, так как получается небольшой файл при достаточно хорошей детализации. Но у него есть недостаток – потеря информации при сжатии. Поэтому, если уменьшать размер файла, происходит ухудшение изображения.
Да и при увеличении таких фотографий становятся видны пиксели. Векторные форматы работают совсем по другому принципу. Они используют линии, отрезки, фигуры, которые описываются математическими формулами. Любое пространство, которое ими ограничивается, можно залить цветом или градиентом. В результате получается изображение, не привязанное к конкретным размерам – его можно легко сжать или растянуть до огромных размеров без потери качества. Одним из таких векторных форматов и является SVG. И он становится всё популярнее, особенно в среде веб-разработки.
Общее описание расширения
Тип файла SVG – сокращение от Scalable Vector Graphics, то есть масштабируемая векторная графика. Для описания изображения используются языки разметки VML и PGML. По сути, это текстовый документ, в котором для каждой фигуры описаны координаты вершин и линий, проходящих через них, а также цвета разных элементов. Первая версия этого формата вышла в 2001 году, и сейчас активно разрабатывается вторая версия. То есть он является перспективным и развивается. Одно из достоинств – малый размер файла, в котором могут быть сохранены довольно сложные рисунки. Поэтому сейчас всё больше иконок, пиктограмм, логотипов и других элементов сайтов используется именно в этом формате, а не в растровых. Это ускоряет загрузку сайта. К уникальным возможностям формата SVG относятся интерактивность и анимация. Первая позволяет картинке реагировать на действия пользователя, например, на клик мышкой или перемещение каких-то элементов. Анимация позволяет создавать довольно сложные сценарии. Всё вместе позволяет создавать очень красивые и живые графические элементы для сайтов. Их даже можно встраивать в обычные растровые изображения в форматах PNG, IPG и прочих.
Чем открыть файл SVG
В Интернете можно найти множество таких картинок на фотостоках, в том числе бесплатных. Создаются они в графических редакторах Adobe Photoshop, Illustrator, Corel Draw и некоторых других. Но возникает вопрос – чем открыть формат SVG. Ведь встроенные средства Windows не показывают, какие картинки в них содержатся. Хотя редактировать SVG можно даже в текстовом редакторе, например, в Блокноте, ведь это текстовый документ, но для этого нужно иметь немалые знания в языках разметки. Открыть файл SVG можно либо в программе, в которой он создавался, либо в каком-нибудь другом графическом редакторе, поддерживающем этот формат.
Существует довольно приличный перечень программ и сервисов, позволяющих работать с файлами формата SVG.
Также важно отметить, что вне зависимости от используемого программного обеспечения, SVG файлы с лёгкостью открываются через популярные браузеры. Именно веб-обозреватели можно применять в качестве инструментов для открытия таких документов.
Если же говорить непосредственно о программных решениях и специальных сервисах, работающих в режиме онлайн, то тут можно привести обширный список возможных вариантов.
Для удобства они были разделены на несколько категорий.
Для ОС Windows и Mac OS
Нельзя отрицать тот факт, что подавляющее большинство компьютеров и ноутбуков работают именно на базе операционных систем, разработанных компанией Microsoft.
Самой актуальной выступает ОС Windows 10, но многие юзеры продолжают пользоваться Windows 8, Windows 7 и более старыми версиями операционки.
Если и у вас установлена одна из ОС серии Windows, для работы с файлами формата SVG можно воспользоваться следующими программами:
Для ОС Linux
Операционная система Linux по уровню своего распространения уступает лидерам в лице Windows и Mac OS.
Но ОС всё равно является востребованной, в результате чего разработчики программного обеспечения считают необходимым выпускать ПО для этой платформы.
Что же касается файлов формата SVG, то здесь их можно открыть с помощью таких рассмотренных уже инструментов как Inkscape, а также GIMP.
Но ещё пользователям Linux доступна такая интересная программная разработка как KolourPaint.
Простой, но очень удобный редактор, позволяющий работать с графикой, включая векторную и растровую. Подойдёт даже новичкам.
Да, по меркам современных версий некоторых программ этот инструмент выглядит устаревшим. Но в плане функциональных возможностей к нему нет никаких существенных претензий.
Главное преимущество заключается в бесплатности этой программы. Ничего платить за использование широких возможностей софта не придётся.
Онлайн сервисы
Отдельно стоит взглянуть на несколько онлайн сервисов, с помощью которых можно открывать файлы формата SVG.
К их числу относятся такие онлайн инструменты:
- Google Диск. Не все знают, но один из самых популярных онлайн сервисов для хранения файлов на самом деле поддерживает огромный перечень разных форматов. В их числе и SVG. При этом ничего платить за использование инструмента не придётся.
- Autodesk Tinkercad. Бесплатное онлайн приложение, позволяющее разрабатывать 3D проекты и не только. Прекрасное решение для учителей и преподавателей. Также эта программа пользуется спросом среди проектировщиков, школьников, студентов и настоящих энтузиастов.
- UnitePDF. Это конвертер, позволяющий сделать из файла формата SVG документ PDF.
- Boxy SVG. Простой сервис, который доступен в виде программы, а также онлайн инструмента. В нём предусмотрены простые, но эффективные средства для рисования и редактирования.
- Vectr. Достаточно крупный и многофункциональный онлайн сервис. Тут, кстати, тоже есть полноценное приложение для установки и запуска на компьютере. Онлайн редактор Vectr отличается простотой работы, дружелюбным интерфейсом. Прекрасное решение для новичков.
Перечисленные программы, сервисы и приложения наглядно показывают, что открывать и редактировать файлы формата SVG можно с помощью большого числа различных решений.
Вопрос лишь в том, что нужно конкретному пользователю.
Конечно, этими названиями список программ для работы с векторной графикой не исчерпывается. Их очень много, в том числе и самый популярный редактор Adobe Photoshop может сохранять изображения как векторы и имеет плагин для их открытия. Не стоит забывать и про популярнейший редактор векторной графики Corel Draw, который можно назвать самым популярным.
Что ещё может вызывать проблемы с файлом
Обычными средствами Windows, да и многих других операционных систем, файлы SVG не открываются. Чтобы видеть их содержимое и тем более редактировать их, нужно установить любой графический редактор с поддержкой этого формата.
Проводник Windows не поддерживает просмотр изображений SVG по умолчанию. Узнайте, как вы можете просматривать эскизы SVG в проводнике Windows.
Если вы графический дизайнер, иллюстратор, веб-дизайнер или много работаете с XML-кодом и / или HTML-кодом, вы можете быть знакомы с форматом Scalable Vector Graphics. SVG – это векторные типы изображений, которые существуют уже почти восемнадцать лет, и, тем не менее, они, похоже, не имеют надлежащей поддержки Windows. Вы не можете открыть файл SVG ни в одной из стандартных программ просмотра изображений Windows (например, в Windows Photo Viewer), ни отредактировать их в таких приложениях, как Paint.
В отличие от растровых изображений или растровой графики, состоящей из точек и пикселей, векторные изображения основаны на коде и состоят из набора математически расположенных кривых, точек, форм и текстов. Вот почему они могут быть изменены без потери качества. Такие приложения, как Paint и Windows Photo Viewer, предназначались для просмотра и редактирования растровой графики, а не векторной графики. Обработка векторных изображений может быть довольно сложной, и даже Paint 3D не поддерживает большинство векторов.
Хотя есть несколько приложений, которые вы можете использовать для создания векторных изображений , иногда вам просто нужно решение для просмотра, а не полноценный редактор изображений.
Вот несколько способов просмотра файлов SVG в Windows.
Использование SVG Viewer Extension
Расширение средства просмотра SVG для Windows – это расширение оболочки, которое позволяет проводнику Windows отображать эскизы SVG.
Существует 32-битная версия и 64-битная версия . Перед загрузкой программного обеспечения для установки расширения убедитесь, что вы знаете архитектуру своего компьютера и операционной системы. Если вы хотите, вы также можете просмотреть исходный код .
1. После загрузки необходимого файла установки перейдите к нему в проводнике Windows и запустите его. Так как издатель для Windows неизвестен, система предупредит вас "что она" против его запуска. Нажмите «Выполнить» и / или «Да» на следующем экране.
2. После запуска установки нажмите следующую кнопку на экране приветствия установки.
3. Прочитайте соглашение на следующем экране, и если вы довольны им, нажмите кнопку «Я принимаю соглашение», затем нажмите кнопку «Далее».
4. Выберите папку назначения. Я предлагаю вам оставить все как есть и нажать «Далее».
5. Последний экран позволяет просматривать подробности установки. Здесь тоже жмите «Установить».
Тестирование расширения и просмотр / организация ваших файлов
1. Перейдите в папку, где находятся все или несколько ваших SVG.
2. Убедитесь, что вы просматриваете их как большие или очень большие значки (в отличие от списка или деталей).
Удобное сочетание клавиш для этого Ctrl + Shift + 2 .
Что вы заметите в миниатюрах, так это то, что для каждого миниатюры есть еще одна миниатюра, встроенная в нее (thumbnailception). Это мой любимый аспект этого расширения оболочки. Он не только показывает вам эскиз SVG, но также показывает приложение по умолчанию, используемое для его открытия.
Итоги
В будущем я надеюсь, что Microsoft предоставит встроенную поддержку SVG или что кто-то хотя бы разработает кодек, который позволит нам просматривать SVG изначально. До тех пор мы всегда можем использовать это расширение оболочки в унисон с нашими браузерами.
Читайте также: