Svg формат: Файл SVG – чем открыть, описание формата

Файл SVG – чем открыть, описание формата

Чем открыть, описание – 2 формата файла

1. Файл масштабируемой векторной графики SVG — Векторные изображения
2. Файл сохраненного прогресса игры — Файлы игр

1. Файл масштабируемой векторной графики SVG

Scalable Vector Graphics File

Тип файла: Векторные изображения

Тип данных: XML-документ

Mime-type: image/svg+xml

Разработчик: Adobe Systems

Заголовок и ключевые строки

HEX: 3C

ASCII: <

Подробное описание

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

Разработанный Консорциумом World Wide Web (W3C), формат SVG является открытым стандартом и служит для отображения векторной графики в интернете. Для её описания в файлах SVG используется XML-код, который может быть просмотрен и изменен в любом текстовом редакторе. С изображениями в формате SVG работают все популярные веб-браузеры, а также графические программы CorelDRAW, Adobe Illustrator, Inkscape, GIMP и другие.

Как, чем открыть файл .svg?

WindowsОнлайнAndroidiOSMac OSLinux Inkscape IrfanView Adobe Illustrator 2022 Adobe InDesign 2022 CorelDRAW Graphics Suite 2021 Corel PaintShop Pro 2022 CADSoftTools ABViewer Google Диск Vecteezy Editor SVGator Boxy SVG Autodesk Tinkercad SVG and SVGZ Viewer Linearity Vectornator TouchAware Limited iDesign Inkscape Linearity Vectornator Boxy SVG Adobe Illustrator 2022 Adobe InDesign 2022 Inkscape Kolourpaint

Инструкция — как выбрать программу из списка, скачать и использовать ее для открытия файла

2.

Файл сохраненного прогресса игры

Saved Game File

Тип файла: Файлы игр

Тип данных: Неизвестно

Разработчик: Неизвестно

Подробное описание

Файл используется различными компьютерными играми, например, Quake III и GTA2, для сохранения достигнутого игроком прогресса, включающего его показатели и статистику. Обычно файл создается игрой автоматически и подгружается при входе игрока, позволяя продолжить развитие персонажа.

Как, чем открыть файл .svg?

Windows GTA2 Saved Game Editor

Инструкция — как выбрать программу из списка, скачать и использовать ее для открытия файла

Для более точного определения формата и программ для открытия файла используйте функцию определения формата файла по расширению и по данным (заголовку) файла.

Формат SVG: достоинства и недостатки

Мы часто встречаем такие форматы, как JPG, PNG и GIF, которые используются как на сайтах, так и в социальных сетях. Они получаются путем создания растровой графики – это фотографии, скриншоты, различные анимированные файлы. Вместе с этими форматами есть еще много похожих, один из которых – SVG.

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

Что такое SVG

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

Совокупность таких деталей может выдать практически любое изображение. Например, это может быть иконка социальной сети Instagram:

Толчок развития данной языковой разметке впервые был дан Консорциумом Всемирной паутины (World Wide Web Consortium), который в 1999 году был более известен как W3C. W3C дал и понятие SVG – языковая разметка для создания двухмерных графических интерфейсов и изображений.

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

Почему так популярен формат SVG – разберемся далее.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Достоинства SVG

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

Другая особенность SVG – это его кастомизация. Предположим, что нам на сайт нужно загрузить красную иконку, но под рукой есть только черная. Если это растровое изображение формата JPG или PNG, то потребуется приложить немало усилий, чтобы поменять цвет иконки. В случае с SVG достаточно открыть графический редактор, поддерживающий векторные изображения, например Figma, и поменять цвет иконки в один клик. Так, будто вы меняете цвет простому элементу. 

Также SVG-изображение можно открывать в HTML и CSS, а это значит, что мы можем напрямую через код изменять как сам объект, так и его цвет.

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

Недостатки SVG

Как таковых недостатков у SVG нет, но есть некоторые моменты, о которых стоит знать:

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

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

Базовые формы SVG

Каждый SVG-файл может состоять из таких элементов, как:

• простая линия;
• ломаная линия;
• прямоугольник;
• окружность;
• эллипс;
• многоугольник.

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

Где работать с SVG-графикой

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

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

Любую из этих фигур можно легко экспортировать в формате SVG:

Это лишь один из способов создания SVG-элемента.

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

Если говорить о профессиональном ПО, то это:

• CorelDraw – самый популярный графический редактор среди любителей, начинающих профессионалов и продвинутых художников.
• Adobe Illustrator – мировой стандарт для отрасли полиграфии. Именно Illustrator позволяет качественно переносить изображения из компьютера на бумагу или любой другой носитель. Предусмотрен уровень масштабирования до 64000%.
• Gravit Designer – полнофункциональный векторный редактор. Он подходит для любых задач – от дизайна интерфейсов и иконок до работы с презентациями, иллюстрациями и анимацией.

Также на просторах интернета вы можете найти много бесплатных сервисов для быстрого редактирования SVG-файлов.

Поддержка браузерами

SVG-формат поддерживается всеми современными браузерами, за исключением Internet Explorer 8. Но и это может быть исправлено использованием JavaScript-библиотеки Raphael.js. Конвертировать SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.

Заключение

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

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

Введение — SVG 1.1 (Второе издание)

Введение — SVG 1.1 (Второе издание)

Содержание

• 1.1 О SVG
• 1.2 Тип MIME SVG, расширение имени файла и файл Macintosh тип
• 1.3 Пространство имен SVG, общедоступный идентификатор и система Идентификатор
• 1.4 Совместимость с другими стандартами
• 1. 5 Терминология
• 1.6 Определения

1.1 О SVG

Эта спецификация определяет функции и синтаксис масштабируемой векторной графики. (СВГ).

SVG — это язык для описания двухмерной графики в XML [XML10]. SVG позволяет использовать три типа графических объектов: векторная графика формы (например, пути, состоящие из прямых и кривых), изображения и текст. Графические объекты можно группировать, стилизовать, преобразованы и объединены в ранее визуализированные объекты. Набор функций включает вложенные преобразования, отсечение контуры, альфа-маски, эффекты фильтров и объекты шаблонов.

рисунков SVG могут быть интерактивными и динамичный. Анимации могут быть определены и запущены либо декларативно (т. е. путем встраивания элементов анимации SVG в содержимом SVG) или с помощью сценариев.

Сложные приложения SVG возможны при использовании дополнительный язык сценариев, который обращается к объектной модели документа SVG (DOM), которая обеспечивает полный доступ ко всем элементам, атрибутам и характеристики. Богатый набор обработчиков событий, таких как «onmouseover» и «onclick» могут быть назначены любому графическому элементу SVG. объект. Из-за его совместимости и использования других веб-стандартов такие функции, как создание сценариев, могут выполняться в XHTML и SVG. элементы одновременно на одной и той же веб-странице.

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

SVG 1.1 — это модульная версия SVG 1. 0 [SVG10]. См. приложение «Определение типа документа». подробности о том, как структурировано DTD, позволяющее профилировать и компоновать с помощью другие XML-языки.

1.2 Тип MIME SVG, расширение имени файла и файл Macintosh тип

Тип MIME для SVG — «image/svg+xml» (см. Типы носителей XML [RFC3023]). регистрация этого типа MIME находится в процессе в W3C.

Рекомендуется, чтобы файлы SVG имели расширение ".svg" (все строчные буквы) на всех платформах. Это рекомендуется использовать gzip-сжатие [RFC1952] Файлы SVG имеют расширение ".svgz" (все нижний регистр) на всех платформах.

Рекомендуется, чтобы файлы SVG, хранящиеся на Macintosh HFS, файловым системам должен быть присвоен тип файла "svg" (все строчные, с пробелом в качестве четвертой буквы). Рекомендуется использовать gzip-сжатие. Файлы SVG, хранящиеся в файловых системах Macintosh HFS, получают файл тип "svgz" (все строчные).

1.3 Пространство имен SVG, общедоступный идентификатор и система Идентификатор

Ниже приведены пространство имен SVG 1.1, общедоступный идентификатор. и системный идентификатор:

Пространство имен SVG:

http://www.w3.org/2000/svg

Публичный идентификатор для SVG 1.1:

PUBLIC «-//W3C//DTD SVG 1.1//EN»

Системный идентификатор для Рекомендация SVG 1.1:

http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

Ниже приведен пример документа объявление типа для документа SVG:

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

1. Его можно найти по адресу http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd.

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

1.4 Совместимость с другими стандартами

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

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

• SVG — это приложение XML, совместимое с Расширяемый язык разметки (XML) 1.0 Рекомендация [XML10]
• SVG совместим с пространствами имен в рекомендации XML [XML-NS]
• SVG использует язык связывания XML (XLink) [XLINK] для IRI ссылается и требует поддержки базовых спецификаций IRI определено в База XML [XML-БАЗА].
• Контент SVG может быть оформлен с помощью CSS (см. Каскадные таблицы стилей (CSS), уровень 2 [CSS2]) или XSLT (см. Преобразования XSL (XSLT) Версия 1.0 [XSLT] и XSL-преобразования (XSLT), версия 2.0 [XSLT2]). См. Стилизация с помощью CSS и Стилизация с помощью XSL для получения подробной информации.
• SVG поддерживает соответствующие свойства и подходы, общие для CSS и XSL, а также выбранная семантика и функции CSS (см. SVG-стиль свойства и SVG Использование каскадных таблиц стилей).
• Ссылки на внешние таблицы стилей осуществляются с помощью механизма документировано в . Связывание таблиц стилей с XML-документами, версия 1.0 . [XML-СС].
• SVG включает полную объектную модель документа (DOM) и соответствует объектной модели документа (DOM) уровня 1 Рекомендация [DOM1]. SVG DOM имеет высокий уровень совместимости и согласованности. с HTML DOM, который определен в DOM Level 1 Спецификация. Кроме того, SVG DOM поддерживает и включает в себя многие из средств, описанных в DOM уровня 2, включая объектную модель CSS и событие умение обращаться [ДОМ2] [ДОМ2СТИЛЬ] [ДОМ2СОБЫТИЯ].
• SVG включает в себя некоторые функции и подходы, которые часть Synchronized Multimedia Integration Language (SMIL) 3.0 Спецификация [СМИЛ], в том числе элемент «переключатель» и «язык системы» атрибут.
• Функции анимации SVG (см. Анимация) были разработаны в сотрудничество с W3C Synchronized Multimedia (SYMM) Рабочая группа, разработчики языка синхронизированной мультимедийной интеграции (SMIL) 3.0, спецификация [Улыбается]. SVG функции анимации включают и расширяют возможности общего назначения Возможности XML-анимации описаны в SMIL Animation . спецификация [СМИЛАНИМ].
• SVG был разработан, чтобы позволить SMIL используйте анимированный или статический SVG-контент в качестве мультимедийных компонентов.
• SVG пытается добиться максимальной совместимости с обоими HTML 4 [HTML4] и XHTML™ 1.0 [XHTML]. Многие из SVG объекты смоделированы непосредственно после HTML, включая его использование CSS [CSS2], свой подход к обработке событий и свой подход к Объектная модель документа [DOM2].
• SVG совместим с работой W3C по интернационализации. Ссылки (W3C и другие) включают: [UNICODE] и [ШАРМОД]. Также см. Интернационализация Поддерживать.
• SVG совместим с работой W3C по веб-доступности. Также см. Поддержка специальных возможностей.

В средах, поддерживающих ДОМ 2 Ядро [DOM2] для других XML-грамматики (например, XHTML [XHTML]), которые также поддерживают SVG и SVG DOM, можно использовать единый подход к написанию сценариев. используется одновременно как для документов XML, так и для графики SVG, в в этом случае интерактивные и динамические эффекты будут возможны на несколько пространств имен XML с использованием одного и того же набора скриптов.

1.5 Терминология

В этой спецификации ключевые слова «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ТРЕБУЕТСЯ», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» следует интерпретировать как описано в Ключевые слова для использования в RFC для обозначения уровней требований [RFC2119]. Однако для удобства чтения эти слова встречаются не во всех заглавные буквы в этой спецификации.

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

1.6 Определения

элемент анимации

Элемент анимации — это элемент, который можно использовать для анимации значение атрибута или свойства другого элемента. Следующие элементы являются элементами анимации: «animateColor», «animateMotion», «animateTransform», «animate» и «set».

Атрибут события анимации

Атрибут события анимации — это атрибут события, указывающий сценарий для запуска определенного события, связанного с анимацией. Видеть Атрибуты события анимации. Атрибуты события анимации: «onbegin», «onend», «onload» и «onrepeat».

базовая форма

Стандартные формы, предварительно определенные в SVG как удобство для обычных графических операций. Конкретно: «круг», «эллипс», «линия», «многоугольник», «полилиния» и «прямоугольник».

холст

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

обтравочный контур

Комбинация «контур», «текст» и основные формы, которые служат контур (при отсутствии сглаживания) 1-битной маски, где все, что находится «внутри» контура, разрешено просвечивает, но все снаружи замаскировано. Видеть Отсечение путей.

элемент-контейнер

Элемент, который может содержать графические элементы и другие элементы-контейнеры в качестве дочерних элементов. Конкретно: «a», «defs», «глиф», «g», «маркер», «маска», «отсутствующий глиф», «шаблон», «svg», «переключатель» и «символ».

Атрибут условной обработки

Атрибут условной обработки или не обрабатывается элемент, на котором он появляется. Большинство элементов, но не все, могут быть указаны атрибуты условной обработки на них. См. Условная обработка для деталей. Атрибуты условной обработки, определенные в SVG 1.1 — это «requiredExtensions», «requiredFeatures» и «systemLanguage».

основные атрибуты

Основные атрибуты — это те атрибуты, которые можно указать на любом элементе SVG. См. Общие атрибуты. Основными атрибутами являются «id», «xml:base», «xml:lang» и «xml:space».

текущий самый внутренний документ SVG фрагмент

Поддерево документа XML, которое начинается с непосредственный предок элемента «svg» данного SVG элемент.

текущий документ SVG фрагмент

Поддерево документа XML, которое начинается с самого внешнего предок элемента «svg» данного SVG элемент с требованием, чтобы все элементы контейнера между самым внешним «svg» и этим элементом находятся все элементы на языке SVG.

Текущая матрица преобразования (CTM)

Матрицы преобразования определяют математическое отображение из одной системы координат в другую с помощью матрицы 3×3 используя уравнение [x’ y’ 1] = [x у 1] * матрица. Текущее преобразование матрица (CTM) определяет отображение от пользователя систему координат в систему координат окна просмотра. См. Координаты системные преобразования.

описательный элемент

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

Атрибут события документа

Атрибут события документа — это атрибут события, который указывает сценарий для запуска определенного события в масштабе документа. Видеть Атрибуты событий на уровне документа. Атрибуты события документа: «onabort», «onerror», «onresize», «onscroll», «onunload» и «onzoom».

атрибут события

Атрибут события — это атрибут, указывающий некоторый сценарий для запуска при событие определенного типа отправляется элементу, на котором атрибут указано. См. Атрибуты события.

заливка

Операция окрашивания внутренней части фигуры или внутренней части глифы символов в текстовой строке.

Атрибуты фильтрующего примитива

Атрибуты фильтрующего примитива — это набор общих атрибутов ко всем примитивным элементам фильтра. Они есть «высота», «результат», «ширина», «х» и «у».

примитивный элемент фильтра

Элемент фильтра-примитива может использоваться как дочерний элемент Элемент filter для указания узла в графе фильтра. Следующие элементы являются примитивными элементами фильтра, определенными в SVG 1.1: ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset ‘, ‘feSpecularLighting’, ‘feTile’ и ‘feTurbulence’.

шрифт

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

глиф

Глиф представляет единицу отображаемого содержимого в шрифте. Часто существует однозначное соответствие между отрисовываемыми персонажами и соответствующие глифы (например, часто символ «А» отображается с использованием одного глифа), но в других случаях несколько глифы используются для отображения одного символа (например, использование акценты) или один глиф может использоваться для отображения нескольких символы (например, лигатуры). Как правило, глиф определяется одной или несколькими формами, такими как путь, возможно, с дополнительным информация, такая как подсказки рендеринга, которые помогают движку шрифтов для создания разборчивого текста небольшого размера.

Элемент градиента

Элемент градиента определяет сервер градиентного рисования. SVG 1.1 определяет следующие элементы градиента: «linearGradient» и «radialGradient».

графический атрибут события

Графический атрибут события — это атрибут события, который определяет сценарий, запускаемый для определенного события взаимодействия с пользователем. Видеть Атрибуты событий в элементах графики и контейнера. Графические атрибуты событий: «onactivate», «onclick», «onfocusin», «onfocusout», «onload», «onmousedown», «onmousemove», «onmouseout», «onmouseover» и «onmouseup».

графический элемент

Один из типов элементов, который может вызвать отображение графики. нарисованный на целевом холсте. Конкретно: «окружность», «эллипс», «изображение», «линия», «путь», «многоугольник», «полилиния», «прямоугольник», «текст» и «использование».

ссылки на графику element

Графический элемент, который использует ссылку на другой документ или элемент в качестве источника его графического содержимого. В частности: «изображение» и «использование».

проверка попадания

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

Справочник IRI

Ссылка IRI является интернационализированным идентификатором ресурса. с необязательным идентификатором фрагмента, как определено в Интернационализированный Идентификаторы ресурсов [RFC3987]. Ссылка IRI служит ссылкой на ресурс или (с идентификатор фрагмента) во вторичный ресурс. Видеть Ссылки и элемент «defs».

элемент источника света

Элемент источника света — это элемент, который может определять источник света информация для «feDiffuseLighting» или «feSpecularLighting» элемент. Следующие элементы источника света определены в SVG 1.1: «feDistantLight», «fePointLight» и «feSpotLight».

локальная ссылка IRI

Интернационализированный идентификатор ресурса [RFC3987], который не включать или и, следовательно, представляет собой ссылку на элемент в текущем документ. См. ссылки и элемент «defs».

Маска

Контейнер элемент, который может содержать графические элементы или другие элементы контейнера, которые определяют набор графики который будет использоваться в качестве полупрозрачной маски для компоновки объекты переднего плана на текущий фон. См. Маски.

нелокальная ссылка IRI

Интернационализированный идентификатор ресурса [RFC3987], который включает или и, таким образом, (обычно) представляет собой ссылку на другой документ или элемент в другом документе. См. Ссылки и элемент «defs».

самый внешний элемент svg

Самый дальний элемент-предок svg, оставшийся в текущий фрагмент документа SVG.

краска

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

атрибут представления

Атрибут XML в элементе SVG, который указывает значение для данного свойства для этого элемента. См. Стиль. Обратите внимание, что хотя любое свойство может быть указано для любого элемента, не все свойства будут применяться к (влияют на отрисовку) данный элемент. В определении каждого свойства указывается, к какому набору элементов, которые он применяет.

свойство

Параметр, который помогает указать, каким должен быть документ предоставлено. Полный список свойств SVG можно найти в Индекс собственности. Свойства присваивается элементам на языке SVG либо представлением атрибуты элементов на языке SVG или с помощью язык стилей, такой как CSS [CSS2]. См. Стиль.

самый корневой элемент «svg»

Самый коренной «svg» элемент самый дальний «svg» элемент-предок, который не выходит из Контекст SVG. Смотрите также Фрагмент документа SVG.

форма

Графический элемент, определяемый некоторой комбинацией прямые линии и кривые. Конкретно: ‘путь’, «прямой», ‘круг’, ‘эллипс’, ‘линия’, «полилиния» и «полигон».

штрих

Операция рисования контура фигуры или контура глифы символов в текстовой строке.

структурный элемент

Структурные элементы – это элементы, определяющие первичную Структура документа SVG. В частности, следующее элементы являются структурными элементами: «defs», «g», «svg», «символ» и «использовать».

Холст SVG

Холст, на который наносится SVG. контент рендерится. См. обсуждение холста SVG в главе о Системы координат, преобразования и Единицы измерения.

Контекст SVG

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

Если содержимое SVG встроено в родительский XML (например, XHTML), контекст SVG не включает предков выше самый корневой элемент «svg». Если содержимое SVG содержит какие-либо ‘иностранный объект’ элементы, которые, в свою очередь, содержат содержимое, отличное от SVG, контекст SVG не не включать содержимое ‘иностранный объект’ элементы.

Фрагмент документа SVG

Поддерево документа XML, начинающееся с «svg» элемент. SVG фрагмент документа может состоять из отдельного документа SVG, или фрагмент родительского XML-документа, заключенный в «svg» элемент. Когда элемент svg является потомком другого элемента «svg», есть два Фрагменты документа SVG, по одному для каждого элемента «svg». (один SVG фрагмент документа содержится в другом документе SVG фрагмент.)

Пользовательский агент SVG

Пользовательский агент SVG — это пользовательский агент который может извлекать и отображать содержимое SVG.

Область просмотра SVG

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

элемент текстового содержимого

Элемент текстового содержимого — это элемент SVG, который вызывает текстовую строку для рендеринга на холсте. Элементы текстового содержимого SVG 1.1 — это следующее: «altGlyph», «textPath», «text», «tref» и «tspan»

дочерний элемент текстового содержимого

Дочерний элемент текстового содержимого — это разрешенный элемент текстового содержимого. как потомок другого элемента текстового содержимого. В SVG 1.1, дочерние элементы текстового содержимого следующие: «altGlyph», «textPath», «tref» и «tspan»

элемент блока текстового содержимого

Элемент блока текстового содержимого представляет собой элемент текстового содержимого который служит самостоятельным элементом для единицы текста, и который может дополнительно содержать определенный дочерний элемент элементы текстового содержимого (например, «цпан»). .

преобразование

Модификация текущего матрица преобразования (CTM), предоставляя дополнительную преобразование в виде набора простых преобразований спецификации (такие как масштабирование, поворот или перевод) и/или одну или несколько матриц преобразования. См. Координаты системные преобразования.

матрица преобразования

Матрицы преобразования определяют математическое отображение из одной системы координат в другую с помощью матрицы 3×3 используя уравнение [x’ y’ 1] = [x у 1] * матрица. Посмотреть текущие матрица преобразования (CTM) и координата системные преобразования.

пользовательский агент

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

«Пользовательский агент» может иметь или не иметь возможность получать и отображать SVG-контент; однако «пользовательский агент SVG» извлекает и отображает содержимое SVG.

пользовательская система координат

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

пространство пользователя

Синоним пользователя система координат.

пользовательских единиц

Значение координаты или длины, выраженное в пользовательских единицах представляет значение координаты или длину в текущей пользовательской системе координат. Таким образом, 10 пользовательских единиц представляют длину 10 единиц в текущая пользовательская система координат.

область просмотра

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

система координат области просмотра

В целом, система координат определяет местоположения и расстояния на текущем холсте. Координата области просмотра система – это система координат, которая активна в начало обработки элемента «svg», до обработка необязательного атрибута viewBox. в случае фрагмента документа SVG, встроенного в родительский документ, который использует CSS для управления своим макетом, то система координат видового экрана будет иметь ту же ориентацию и длины, как в CSS, с исходной точкой в ​​верхнем левом углу окна просмотра. См. Начальное окно просмотра и Создание новый видовой экран.

пространство окна просмотра

Синоним для координат окна просмотра система.

единицы области просмотра

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

Атрибуты XLink

Атрибуты XLink — это семь атрибутов, определенных в язык связывания XML спецификации [XLINK], которые используются на различных элементах SVG, которые могут ссылаться на ресурсы. Большинство атрибут импорта XLink — «xlink:href», определение которого можно найти в каждом элементе, который это позволяет. Остальные атрибуты XLink: «xlink:type», «xlink:role», «xlink:arcrole», «xlink:title», «xlink:show» и «xlink: активировать».

Что такое файл SVG? Как открыть или преобразовать формат изображения

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

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

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

Формат файла SVG является сокращением от Scalable Vector Graphics, и, как следует из названия, это разновидность графического файла. В отличие от растровой графики (такой как файлы JPG и PNG), графика SVG состоит из векторов, которые представляют собой своего рода геометрический объект. Файл использует язык XML для математического описания изображения с использованием векторной геометрии.

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

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

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

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

Проще всего просмотреть файл SVG в веб-браузере. Поскольку SVG использует XML — текстовый язык разметки, похожий на HTML, — любой современный веб-браузер может отображать файл SVG. Просто перетащите файл SVG в браузер, такой как Chrome, Firefox, Safari или Microsoft Edge, и изображение должно появиться на новой вкладке. Однако вы не сможете редактировать изображение.

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

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

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

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

1. В Photoshop щелкните Файл и выберите Открыть .

2. Найдите файл SVG и выберите Открыть .

3. В окне Rasterize SVG Format выберите размер, в который вы хотите преобразовать изображение, и нажмите OK .

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

4. Внесите любые дополнительные изменения в графику.

5. Выберите File , затем Export , а затем Export As .

6. В окне Экспортировать как выберите тип файла, который вы хотите создать (например, JPG), и нажмите Экспорт .

7. Выберите место для файла и нажмите Сохранить .

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

1. Нажмите Выберите «Файлы» и выберите файл SVG.

2. В раскрывающемся меню справа от до выберите формат файла, в который вы хотите преобразовать его (например, JPG ).

3. Щелкните Преобразовать .

4. После небольшого ожидания файл будет завершен. Нажмите Загрузить и сохраните файл на свой компьютер.

Дэйв Джонсон

Внештатный писатель

Дэйв Джонсон — технический журналист, который пишет о потребительских технологиях и о том, как индустрия трансформирует спекулятивный мир научной фантастики в современную реальную жизнь. Дэйв вырос в Нью-Джерси, прежде чем поступить в ВВС, чтобы управлять спутниками, преподавать космические операции и планировать космические запуски. Затем он провел восемь лет в качестве руководителя отдела контента в группе Windows в Microsoft. Как фотограф Дэйв фотографировал волков в их естественной среде обитания; он также инструктор по подводному плаванию и соведущий нескольких подкастов.