Svg чем открыть на android

Обновлено: 04.07.2024

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

Что за формат SVG и где используется

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

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

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

Лучшие редакторы для работы с файлами SVG

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

Adobe Illustrator

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

Boxy SVG

Открыть SVG-картинки также можно с помощью специально созданного для работы с этим форматом приложения Boxy SVG. Данный редактор во многом уступает Adobe Illustrator, однако в нём вы найдете все базовые инструменты для создания и редактирования изображений SVG. Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS. Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.

Vectr

Чем открыть файл SVG еще? Для работы с файлами этого типа есть программа Vectr, очень даже неплохо справляющаяся с возложенными на неё задачами редактирования. В приложении доступны такие функции, как изменение отдельных частей векторного изображения, работа со слоями, добавление текста и примитивов, применение эффектов (например, прозрачность, обводка, внешняя и внутренняя тень), использование градиентов, пера, линий и других инструментов. Утилита Vectr бесплатна, есть версии для Windows, Linux и Chrome OS.

Inkscape

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

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

Чем открыть SVG онлайн

Если же вы ищите что-то попроще, попробуйте онлайновый векторный редактор Sketchpad, доступный по адресу sketch.io/sketchpad. В активе Sketchpad имеются такие инструменты, как кисти, линии, стрелки, примитивы, клипарт, перо, мелок, аэрограф, заливка и т.п. Есть работа со слоями, палитрой и градиентами.

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

Конвертеры SVG в PNG

Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

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

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

==== --- Особенность - ====
1. Наше маленькое, но чрезвычайно мощное приложение поможет вам открыть файл SVG самым простым и быстрым способом.
2. Программа просмотра SVG не только помогает открывать и просматривать файлы SVG, программа просмотра файлов SVG также позволяет сохранять эти изображения в формате PNG, чтобы вы могли легко просматривать их в любом приложении для фотографий и делиться ими с другими.
Программа просмотра миниатюр SVG очень проста в использовании. После загрузки бесплатная программа просмотра SVG автоматически сканирует и находит файлы SVG, содержащиеся в вашем телефоне. Вы также можете открыть файлы SVG, щелкнув значок «Читать SVG».
3.Вы также можете вставить текст файла SVG, и приложение покажет результат SVG для вас!
Подождите немного (диапазон 1-2 с) программа просмотра файлов SVG обработает и позволит вам просматривать файлы SVG очень быстро!
4.Вы также можете сохранить файл в формате PNG, файлы PNG сохраняются в папке SVG-Converter на вашем телефоне!
5. Разрешить масштабирование особенно далеко
6. Бесплатная конвертация в png
7. Разрешить чтение SVG с внешней SD-карты, OneDrive, GoogleDriver, .

Обратите внимание, Adobe Viewer SVG необходимо запросить разрешение на запись вашего файла на телефон, поэтому, пожалуйста, примите для SVG чтения файлов можно использовать!

Благодарим Вас за использование SVG Reader. Если у вас есть какие-либо ошибки при использовании программы просмотра фотографий SVG, пожалуйста, напишите нам, чтобы проверить, прежде чем давать какие-либо плохие оценки, еще раз спасибо!

Достаточно долгое время мы занимаемся разработкой детских приложений под Android, постепенно постигая множество нюансов этой платформы. Есть одни грабли, которые подстерегают нас в каждом приложении, – это фрагментация экранов. Если делать одно изображение только под телефон маленького размера, то на планшете оно выглядит мягко говоря “не очень”. А если делать изображение высокого разрешения для планшетов и пытаться использовать его на телефонах, то с очень большой вероятность приложение вывалится с OutOfMemory.

Приходится готовить несколько экземляров одного и того же изображения под разные экраны. Еще сильнее облака сгущает новый монстр Galaxy Nexus 10 с безумным разрешением 2560х1600.

В общем, неплохо бы что-то изменить, решили мы. А что если использовать в приложениях не растровые изображения, а векторные? Такие изображения легко масштабируются под разные разрешения экранов, при этом не теряя в качестве. Можно использовать всего одно изображение под разные разрешения и размеры.

Загружаем тестовый проект с изображениями — всё отлично! Подключаем наши изображения — пусто. Как оказалось, данная библиотека поддерживает только формат SVG basic 1.1, который не поддерживается Inkspace, а рождается только в Adobe Illustrator.

Пробуем вторую библиотеку SVG-Android-2, которая является форком первого проекта и ушла чуть-чуть дальше.
Она уже понимает Inkscape, а также поддерживает другие фишки этого формата, о чем можно почитать тут. Здесь всё пошло проще, картинки загрузились и выглядели шикарно и на телефоне, и на планшете. На нем мы и остановились.

Пример SVG-изображения и неадаптированного по размеру под планшет PNG-изображения на планшете.
(просмотреть изображение в оригинальном размере 1280х800)

Первое — SVG (10 Кб), второе — PNG (22 Кб). Второе изображение имеет размытый контур и ступенчатый градиент

Масштабирование изображений

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

Не забываем для SVG устанавливать свойство аdjustViewBounds в значение true, иначе изображение может рассчитывать свои границы не так, как вы задумали.

Размер изображений с тенями и подсветками

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

Изорбражения с тенью и без: 118 Кб vs 1 Кб

Подсветку можно отключить или в графическом редакторе, или же прямым редактированием SVG-файла — удаляем тэг <image /> с огромным содержимым.

Отображение градиентов

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

Вот как это выглядело на экране: слева — черное небо в виде градиента, справа — корректная картинка.

Время загрузки изображений

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

Прозрачность и цветовые фильтры

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

Оказалось, что ни alpha, ни colorFilter мы применить не сможем, т.к. библиотека загружает не типичные bitmapDrawable, а pictureDrawable, и в исходниках Android мы видим пустые методы для этого класса:

До этого с классом pictureDrawable никогда не сталкивались, и это было большой неожиданностью.

Опять покопавшись в исходниках библиотеки, мы нашли в классе SVGHandler поле fillPaint типа Paint, которым рисуются все компоненты. Если до загрузки элемента ему установить colorFilter, то он будет работать как положено. Нас это вполне устраивало, поэтому мы чуть-чуть изменили метод загрузки SVG, добавив возможность передавать туда цвет фильтра, который при необходимости устанавливается перед загрузкой изображения. Теперь изображения загружались так:

А в самом SVGHandler появился такой метод:

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

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

Нюанс с принудительной обработкой GPU

После запуска приложения к нам стали такие поступать ошибки:

Оказалось, что если на устройстве включена настройка “Принудительная обработка GPU” (Developer options — Force GPU Rendering), то наше приложение валится, т.к. метод drawPicture() у Canvas не поддерживает аппаратное ускорение. Об этом можно почитать на android developer.
Причем простое указание в манифесте android:hardwareAccelerated=«false» проблему не решает — пользовательская галочка в настройках имеет более высокий приоритет.

Было найдено довольно простое решение: для всех view, которые работают с нашими pictureDrawable, полученными из SVG, отключить аппаратное ускорение.
Так как функция аппаратного ускорения появилась в Аndroid 3.0 (api 11), то для работы с этим функционалом пришлось изменить target sdk нашего проекта с 8 на 11. И, конечно же, надо помнить про обратную совместимость — на более ранних платформах этих методов нет.

Выводы

Давайте подведем краткий итог работы с векторными изображениями в формате SVG в Android.

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

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

PNG — 3 (сплэшскрин и 2 фона для меню);
SVG-элементов — 97;
Размер приложения 3,5 Мб.

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

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

PS: Если вы уже использовали SVG в своих проектах или по другому обходили проблемы, с которыми столкнулись мы при использовании SVG — пишите в комментариях. Будем рады услышать Ваш опыт.

чтобы добавить поддержку SVG к 2.x версии платформы, у вас есть два основных варианта:

установите более способный браузер (например, Firefox или Opera Mobile - оба поддерживают SVG)
используйте JavaScript polyfill, который может анализировать SVG и отображать его в HTML5 холст

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

в более позднем случае вы хотите использовать polyfill. Сегодня доступно множество библиотек JavaScript, которые могут prase SVG и визуализировать на холсте. Два примера являются:

используя polyfill, вы можете отобразить SVG в canavs на всех версиях Android 2.x.

для более полного примера этого подхода вы можете обратиться к этот блог, который обсуждает использование canvg полифилл для создания диаграмм Kendo UI DataViz (SVG-based) на Android 2.х. Надеюсь, что помогает!

В настоящее время некоторые люди, включая меня, работают над этим самостоятельно.
Вы можете найти рабочее решение в этих статьях:
Android. ImageView с поддержкой SVG.
Android ImageView и Drawable с поддержкой SVG

появилась новая библиотека (в активной разработке) androidsvg что позволяет включать изображения svg непосредственно в проекты. Он имеет преимущество определения SVGImageView что позволяет включать svg непосредственно в XML макета.

наконец, в том числе svg в android просто.

Я только что бросил РЕПО Github и пример РЕПО для моей собственной библиотеки TPSVG, которую я изначально создал специально для своего приложения.

Я знаю, что мое решение несколько хардкорно, но оно отлично работает, не требует никаких внешних библиотек (по крайней мере, не в вашем окончательном коде) и очень быстро.

2) Напишите простое приложение, которое не будет делать ничего, кроме загрузки и покажите свое изображение SVG.

3) Измените библиотеку загрузки SVG, чтобы она печатала код Java, который создает класс изображения или сохраняет его в строковой переменной.

4) скопируйте-вставьте полученный таким образом код Java в приложение, которое вы пишете.

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

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