Svg-файл, что это такое

Обновлено: 21.11.2024

Что есть на этой странице

.SVG вариант №

Файл SVG представляет собой файл скалярной векторной графики, в котором используется текстовый формат на основе XML для описания внешнего вида изображения. Слово «масштабируемый» относится к тому факту, что SVG можно масштабировать до разных размеров без потери качества. Текстовое описание таких файлов делает их независимыми от разрешения. Это один из наиболее часто используемых форматов для создания веб-сайтов и печати графики для обеспечения масштабируемости. Однако этот формат можно использовать только для двумерной графики. Файлы SVG можно просматривать/открывать практически во всех современных браузерах, включая Chrome, Internet Explorer, Firefox и Safari.

Краткая история

Спецификации SVG доступны в качестве открытого стандарта Консорциумом World Wide Web (W3C) с 1999 года. До этого аналогичные спецификации форматов файлов в шести различных форматах предоставлялись W3C до 1998 года. была версия 1.1. В 2016 году была опубликована более новая версия SVG 2, включающая в себя дополнительные функции по сравнению с SVG 1.1.

Спецификации формата файла

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

SVG-фигуры

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

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

Контуры. Контуры используются для представления простых и сложных контуров фигур. Коды используются для определения характера операции. Например, M используется для перемещения в, L — для линии до, Z — для замыкания пути и т. д.

Основные фигуры. Можно рисовать прямолинейные пути и пути, состоящие из ряда соединенных прямолинейных сегментов (полилиний), а также замкнутые многоугольники, окружности и эллипсы. Прямоугольники и прямоугольники со скругленными углами также являются стандартными элементами.

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

Рисование. Фигуры могут быть заполнены и/или обведены цветом, градиентом или узором, что позволяет сделать их непрозрачными или иметь любую степень прозрачности. Элементы конца линии, такие как стрелки или символы, появляющиеся в вершинах многоугольника, представлены маркерами.

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

Градиенты и узоры. Фигуры в файле SVG могут быть заполнены или обведены сплошными цветами, градиентами или повторяющимися узорами.

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

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

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

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

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

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

Примеры

Следующие строки показывают, как круг представлен с помощью скрипта SVG.

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

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

Что вы узнаете.

Что такое файл SVG?

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

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

Вы можете легко определить файл SVG по его расширению .svg.

История файла SVG.

История файла SVG восходит к концу 1990-х годов, когда Консорциум World Wide Web (W3C) предложил разработчикам новый тип формата векторной графики. Было подано шесть конкурирующих предложений, которые помогли определить, что в итоге стало форматом SVG W3C.

Понадобилось некоторое время, чтобы популярность SVG выросла. Их поддержка была относительно небольшой до 2017 года, когда люди начали видеть преимущества использования SVG в современных веб-браузерах. Файлы SVG в настоящее время широко используются для 2D-изображений веб-сайтов, поскольку большинство браузеров и приложений для рисования векторных файлов легко их обрабатывают.

Для чего используются файлы SVG?

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

Значки и логотипы веб-сайтов.

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

Инфографика и иллюстрации.

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

Плюсы и минусы файлов SVG.

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

Преимущества файлов SVG.

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

Недостатки файлов SVG.

Файлы SVG отлично подходят для веб-графики, такой как логотипы, иллюстрации и диаграммы. Но отсутствие у них пикселей затрудняет отображение высококачественных цифровых фотографий. Файлы JPEG, как правило, лучше подходят для детальных фотографий.
Только современные браузеры могут поддерживать изображения SVG. Вы можете столкнуться с трудностями при использовании файлов SVG с Internet Explorer 8 и другими старыми браузерами.
Код, содержащийся в изображениях SVG, может быть труден для понимания, если вы плохо знакомы с этим форматом файла.

Как открыть файл SVG.

От Chrome и Edge до Safari и Firefox — сегодня все основные браузеры позволяют открывать файлы SVG — независимо от того, используете ли вы Mac или Windows. Просто запустите браузер и нажмите «Файл» > «Открыть», чтобы выбрать файл, который вы хотите просмотреть. Затем он отобразится в вашем браузере.

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

Как создать и отредактировать файл SVG.

При использовании Adobe Photoshop выполните следующие действия:

Собрав изображение в Photoshop, нажмите «Файл» > «Экспорт» > «Экспортировать как».
Нажмите раскрывающееся меню «Формат» в появившемся окне и выберите SVG.
Выберите «Экспортировать все» и сохраните файл.

Полезное примечание: поскольку Photoshop — это редактор растровой графики, многие люди предпочитают создавать и редактировать файлы SVG в Adobe Illustrator, редакторе векторной графики.

Файлы SVG: часто задаваемые вопросы.

Поддерживают ли файлы SVG анимацию?

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

Как определить файл SVG?

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

Можно ли использовать файлы SVG только в Интернете?

Хотя изображения SVG в основном используются в Интернете, они существуют и за пределами онлайн-мира. Например, поскольку они не искажаются при изменении исходных размеров, файлы SVG полезны в качестве шаблонов для печати на одежде, например на футболках. Файл JPEG, состоящий из большого количества пикселей, не будет передаваться так чисто.

Насколько велики файлы SVG?

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

В чем разница между файлами SVG и PNG?

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

Тим Фишер имеет более чем 30-летний опыт работы в сфере технологий. Он пишет о технологиях более двух десятилетий и является вице-президентом и генеральным директором Lifewire.

Райан Периан — сертифицированный ИТ-специалист, обладатель множества сертификатов в области ИТ и более 12 лет опыта работы на должностях поддержки и управления в сфере ИТ.

Что нужно знать

Файл SVG — это файл масштабируемой векторной графики.
Откройте его в любом браузере или графическом редакторе, таком как Photoshop, Illustrator или GIMP.
Преобразование в PNG или JPG с помощью нашего инструмента (ниже) или в другие форматы с помощью графического редактора.

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

Что такое файл SVG?

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

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

Если файл SVG сжат с помощью сжатия GZIP, файл будет заканчиваться расширением .SVGZ и может быть на 50–80 % меньше по размеру.

Другие файлы с расширением .SVG, не относящиеся к графическому формату, могут вместо этого быть файлами сохраненной игры. Такие игры, как Return to Castle Wolfenstein и Grand Theft Auto, сохраняют ход игры в файл SVG.

Как открыть файл SVG

Самый простой и быстрый способ открыть SVG-файл для просмотра (а не для редактирования) – использовать современный веб-браузер, такой как Chrome, Firefox, Edge или Internet Explorer (почти все из них). должен обеспечивать некоторую поддержку рендеринга для формата SVG. Это означает, что вы можете открывать онлайн-файлы SVG без предварительной загрузки.

Если у вас есть уже есть файл SVG на вашем компьютере, веб-браузер также можно использовать в качестве автономного средства просмотра SVG. Откройте эти SVG-файлы с помощью параметра «Открыть» веб-браузера (сочетание клавиш Ctrl+O).

Файлы SVG можно создавать с помощью Adobe Illustrator, поэтому вы можете использовать эту программу для открытия файла. Некоторые другие программы Adobe, поддерживающие файлы SVG (если установлен подключаемый модуль SVG Kit для Adobe CS), включают программы Adobe Photoshop, Photoshop Elements и InDesign. Adobe Animate также работает с файлами SVG.

Некоторые программы сторонних разработчиков, которые могут открывать файлы SVG, включают Microsoft Visio, CorelDRAW, Corel PaintShop Pro и CADSoftTools ABViewer.

Inkscape, GIMP и Vectornator — бесплатные программы, которые могут работать с файлами SVG, но вы должны загрузить их, чтобы открыть файл SVG.

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

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

Если сама игра не открывает файл SVG, попробуйте редактор сохраненных игр GTA2 или откройте файл SVG в текстовом редакторе, чтобы посмотреть, есть ли там что-то полезное.

Как преобразовать файл SVG

Самый простой способ конвертировать SVG-файл в PNG или JPG, два наиболее распространенных формата изображений, — использовать наш собственный конвертер файлов SVG:

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

Если вам нужно преобразовать его в другой формат, например PDF или GIF, а размер файла SVG довольно мал, вам поможет сторонний онлайн-инструмент, например Zamzar.

Autotracer — это еще один онлайн-конвертер SVG, который позволяет конвертировать SVG (с вашего устройства или через его URL-адрес) в некоторые другие форматы, такие как EPS, файл Adobe Illustrator (AI), DXF, PDF, SK и т. д.

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

Например, если вы используете Inkscape, после открытия/редактирования файла SVG вы можете сохранить его обратно в SVG со всеми внесенными вами изменениями, но также можете сохранить его в другом формате файла, таком как PNG, PDF, DXF, ODG, EPS, TAR, PS, HPGL и многие другие.

Дополнительная информация о файлах SVG

Формат масштабируемой векторной графики был создан в 1999 году и до сих пор разрабатывается консорциумом World Wide Web Consortium (W3C).

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

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

Файл SVG представляет собой графику, сохраненную в двумерном векторном графическом формате, созданном Консорциумом World Wide Web (W3C). Он хранит информацию, описывающую изображение, в текстовом формате, основанном на XML. Файлы SVG могут содержать векторные фигуры, встроенную растровую графику (также известную как растровые изображения) и текст.

Файл SVG открыт в Adobe Illustrator 2021

Формат SVG — это открытый стандарт, разработанный W3C при участии Adobe и первоначально выпущенный в 2001 году. С 2001 года W3C выпустил несколько спецификаций SVG, включая SVG 1.1, SVG Tiny 1.2 и SVG 2.0.

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

Вы можете создавать SVG-графику с помощью различных инструментов, но одним из наиболее популярных инструментов, используемых профессионалами, является Adobe Illustrator (Windows и macOS). Чтобы экспортировать дизайн в виде файла SVG с помощью Illustrator, выберите «Файл» → «Сохранить как». или Файл → Экспорт → Экспортировать как. и выберите SVG в раскрывающемся меню формата.

ПРИМЕЧАНИЕ. Если вам нужно уменьшить размер файла SVG (полезно при передаче графики в Интернете), вы можете экспортировать его как файл .SVGZ. При этом графика SVG сжимается с помощью алгоритма gzip.

Как открыть файл SVG

Вы можете открывать файлы SVG в различных графических редакторах, включая Adobe Illustrator, Corel PaintShop Pro (Windows), Inkscape (мультиплатформенный) и GIMP (мультиплатформенный).

Веб-браузеры, такие как Google Chrome (многоплатформенный), Microsoft Edge (многоплатформенный), Mozilla Firefox (мультиплатформенный) и Apple Safari (мультиплатформенный), также поддерживают файлы SVG.

ПРИМЕЧАНИЕ. Поскольку файлы SVG сохраняются в текстовом формате на основе XML, вы можете создавать, изменять и сохранять файлы SVG с помощью текстовых и XML-редакторов.

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