Svg чем открыть на android
Чем проще всего открыть SVG-изображение на Android-телефоне?
Разумеется, у опытных творческих людей, немалое время уделяющих работе с изображениями, есть полный набор необходимых программных художественных инструментов. Но тем пользователям, у которых необходимость открыть векторное SVG-изображение возникает лишь изредка, придется по вкусу замечательное приложение SVG viewer от разработчика codefuture.biz, которое может быть загружено из Google Play. Пользоваться им даже проще, чем считать до десяти.
Оно относится к числу программных инструментов, выполняющих всего одну задачу и этим облегчающих пользователю взаимодействие со своим девайсом. Далеко не каждому нужны мощные графические редакторы, способные помочь создать настоящий творческий шедевр, но при этом требующие долгих часов на то, чтобы разобраться во всем многообразии его замечательных функций, которые способен оценить только истинный художник.
Если вам необходимо открыть SVG-файл, то посредством одного из установленных на вашем девайсе файловых менеджеров перейдите к папке, где данное изображение располагается. Коснитесь пальцем SVG-файла, который вам необходимо открыть.
В открывшемся списке выберите тип файла «Изображение», коснувшись данного пункта меню. Затем появится следующий список, предлагающий приложения, при помощи которых нужный вам файл может быть открыт.
Выберите из данного списка «SVG viewer». Картинка будет открыта в данном приложении.
Преимуществом данного приложения является невероятно маленький размер его установочного APK-файла — всего 62 килобайта, а также совместимость данного программного инструмента с операционными системами Android 3.1 и более поздних версий.
Никаких специальных компьютерных или художественных познаний для работы с этим приложением не нужно.
Приложение позволяет увеличивать и уменьшать изображение «щипком» и переключаться в полноэкранный режим просмотра (кнопка «Fullscreen» в правом верхнем углу экрана приложения).
Наряду с приложением, позволяющим просто изменить размер сразу нескольких картинок, SVG viewer будет полезен тем, кто лишь начинает изучать разнообразные возможности ОС Android по работе с изображениями различных форматов. Полезен он будет и тем родителям, которые проводят со своими малышами первые уроки рисования и знакомят их с тем, какой бывает векторная графика.
Помогают ли начинающим пользователям простые программные решения в работе с графикой?
Приложение: SVG viewer Разработчик: codefuture.biz Категория: Мультимедиа и видео Версия: 1.3.4 Цена: Бесплатно Скачать: Google Play
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Несмотря на то что на рынке уже давно существует масса приложений для переноса чатов WhatsApp, сам мессенджер никогда не предлагал нативного способа трансфера. Поэтому, если вы переходили с Android на iOS (как я) или наоборот, вы рисковали потерять всю свою переписку, если по какой-то причине не хотели прибегать к стороннему софту. Долгое время в WhatsApp уверяли, что так и должно быть, потому что это ограничение связано с соображениями безопасности. Дескать, невозможно переносить зашифрованные сообщения. Но в результате разработчики мессенджера всё-таки сдались.
Вы когда-нибудь задумывались, как изменились смартфоны за последние годы? Нет, я говорю не о росте производительности, изменениях в дизайне и улучшениях камер. Всё это очевидно и не требует прямого сопоставления. Я говорю о чём-то более глубоком, что раньше воспринималось совершенно не так, как сейчас. Просто мы теперь уже забыли о том, что когда-то считали совершенно привычные сегодня вещи чем-то чрезвычайно непотребным для каждодневного использования в смартфонах. Всё ещё не понимаете, о чём я? Сейчас объясню подробнее.
SVG Viewer 3.1.0
Скачать
Почему вам следует использовать это приложение для визуализации файлов SVG
— Визуализировать файлы SVG с помощью веб-браузера вашего смартфона очень сложно и проблематично, особенно когда файл находится на SD-карте или их размер превышает область просмотра, и вы не можете уменьшить масштаб. Поэтому это приложение поможет вам просматривать даже большие файлы SVG, не превышая размер экрана;
— Есть две возможности для просмотра ваших файлов: используя встроенную библиотеку или движок веб-просмотра, эти параметры можно установить в окне настроек;
— Некоторые пользователи отметили, что в этом приложении нет необходимости, и они могут использовать веб-браузер для просмотра файлов SVG, введя путь к файлу. Конечно, вы можете это сделать, но мое приложение предлагает более продвинутые функции, такие как недавно просмотренные файлы, выбор нескольких документов, редактирование слоев файлов, сохранение в формате png, полноэкранный просмотр и т. Д. Поэтому мое приложение является гораздо лучшим и более быстрым решением для просмотра SVG. файлы.
— Это приложение может быть полезно дизайнерам и разработчикам, чтобы увидеть, как созданные значки будут выглядеть на нескольких устройствах Android.
Инструкции по открытию файлов SVG из вложений Gmail:
1) Загрузите вложения на Google Диск, вверху файла есть значок приложения;
2) Откройте приложение Google Drive и нажмите и удерживайте один из загруженных файлов, выберите нужные файлы;
3) Нажмите опцию «Отправить файл» и затем выберите это приложение.
Достаточно долгое время мы занимаемся разработкой детских приложений под 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-файла — удаляем тэг с огромным содержимым.
Отображение градиентов
На некоторых изображениях вдруг обнаружились черные пятна вместо фона. Оказалось, что градиент не поддерживается!
Проблема с градиентами решилась удалением лишних тэгов из svg (описано далее в статье). Но в принципе, и с этим можно было бы жить и в наших простых изображениях заменить градиент однородной заливкой, если бы не другой нюанс — значительное время загрузки изображений.
Вот как это выглядело на экране: слева — черное небо в виде градиента, справа — корректная картинка.
Время загрузки изображений
В приложении нужно было по 6 изображений на одной странице ViewPager, а поскольку они подгружаются в процессе прокрутки (если не кэшировать), интерфейс заметно дергался при скроллинге. Этого очень не хотелось, и было решено загружать все изображения при старте приложения. Получили время инициализации порядка 8 секунд, что было слишком долго.
В проблеме решили разобраться. Выкачали исходники проекта SVG-Android-2 и стали искать, что именно так тормозит. Оказалось, что в классе SVGParser XML-файл изображения парсится дважды: первый раз он собирает информацию о дополнительных атрибутах, которые используются при втором проходе. И, что самое интересное, — анализируется лишь атрибут xlink:href, который является некоторым подобием гиперссылок внутри самого документа. В наших проблемных изображениях как раз были такие ссылки, и вели они никуда. После того, как мы избавились от данных ссылок, отредактировав код SVG в некоторых изображениях, градиент стал корректно отображаться. Более того, убрав этот предварительный проход и немного оптимизирорав процесс загрузки, мы смогли уменьшить скорость загрузки с 8 секунд до 1,8-2. Следует заметить, что это соизмеримо с PNG среднего размера — загрузка этих же изображений в память заняла 1,7 секунд.
Ниже приведено сравнение загрузки 35 файлов в формате SVG и PNG.
| SVG | PNG( 500×500) | |
| Размер, КБ | 327 | 943 |
| Время загрузки, с | 1,9 | 1,7 |
Прозрачность и цветовые фильтры
Часто в играх мы используем полупрозрачные картинки для неактивных элементов. В этом проекте помимо прозрачности нужны были цветовые фильтры для генерации элементов в играх, то есть чтобы один элемент можно было использовать один раз, но, раскрашивая его по-разному, мы получали бы разные элементы.
Оказалось, что ни 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.
PS: Если вы уже использовали SVG в своих проектах или по другому обходили проблемы, с которыми столкнулись мы при использовании SVG — пишите в комментариях. Будем рады услышать Ваш опыт.
Открытие SVG-файла
SVG — это один из форматов хранения изображения, который совсем не теряет в качестве при масштабировании (изменении размера). Также возможности SVG позволяют менять параметры изображения через XML-разметку, если его открыть через редакторы кода. К сожалению, многие просмотрщики фотографий, в том числе и стандартные для Windows, все еще не научились корректно открывать SVG.
Как открыть SVG-файл
К сожалению, многие просмотрщики фотографий и других графических элементов до сих пор не умеют работать с SVG без сторонних плагинов. Однако данное расширение поддерживают некоторые графические редакторы и все браузеры. Также некоторые универсальные просмотрщики файлов тоже умеют открывать SVG без необходимости установки дополнительных плагинов и расширений.
Далее рассмотрим перечень данных программ и принцип взаимодействия с ними.
Вариант 1: GIMP
Продвинутый бесплатный графический редактор. Умеет открывать SVG и другие “редкие” форматы. Также в нем вы можете вносить и сохранять изменения в данный формат изображений.
Процесс открытия SVG-файлов через графический редактор GIMP выглядит следующим образом:
После проделанных по инструкции манипуляций, у вас откроется SVG-изображение в рабочем окне GIMP. Вы можете там пересохранить его в другой формат и/или выполнить его редактирование.
Вариант 2: Adobe Illustrator
Тоже продвинутый графический редактор, разработанный как раз для создания и редактирования векторной графики. Он тоже поддерживает работу с SVG-картинками. Однако, в отличии от предыдущего варианта, распространяется исключительно на платной основе.
Выбранные на 2 шаге картинки отобразятся в рабочей области Adobe Illustrator.
Вариант 3: Google Chrome
SVG-картинки можно без проблем открывать во многих веб-браузерах. Мы рассмотрим процесс открытия данного файла в самом популярном браузере — Google Chrome:
Выбранные изображения откроются автоматически в режиме просмотра в новых вкладках браузера. В большинстве других браузерах: Яндекс Браузер, Opera, Mozilla Firefox, Vivaldi и т.д. процесс открытия выглядит абсолютно так же, как в Google Chrome. Они тоже, кстати, поддерживают работу с SVG в режиме просмотра.
Вариант 4: OpenOffice Draw
Это простой редактор изображений, который идет в комплекте с пакетом офисных программ OpenOffice. Функциональность здесь в плане редактирования оставляет желать лучшего, но для открытия SVG-изображений ее вполне хватит. Плюс, данный офисный пакет распространяется на полностью бесплатной основе.
Процесс открытия SVG-файла выглядит здесь следующим образом:
OpenOffice по умолчанию откроет выбранное SVG-изображение в программу Draw.
Также вместо проделывания описанной в статье инструкции вы можете просто перетащить нужный файл в окно OpenOffice прямо из “Проводника”. Программа тоже его откроет корректно.
Вариант 5: LibreOffice Draw
Это тоже один из бесплатных пакетов для работы с офисными приложениями. Он очень похож по своему функционалу и набору встроенных программ на OpenOffice. Однако интерфейс обоих пакетов и некоторых программ, входящих в них, несколько различается.
Процесс открытия SVG-файла в этом случае происходит по следующей инструкции:
Ваше SVG-изображение откроется в интерфейсе программы Draw. Также вместо проделывания описанной в статье инструкции вы можете просто перетащить нужный файл в окно OpenOffice прямо из “Проводника”. Программа тоже его откроет корректно.
Вариант 6: XnView
XnView — это универсальный просмотрщик изображений. Встроенный функционал позволяет без проблем просматривать содержимое SVG-файлов. Это платная программа, но ее можно использовать и бесплатно. Процесс открытия SVG-файлов с ее помощью выглядит следующим образом:
Выбранный SVG-файл откроется в режиме просмотра в интерфейсе XnView.
Также SVG-картинку можно посмотреть через внутрипрограммный файловый менеджер, правда, только в режиме предпросмотра.
Чуть ниже выбранное SVG-изображение откроется в режиме предпросмотра.
Вариант 7: IrfanView
Это еще один универсальный просмотрщик файлов. Однако в отличии от ранее рассмотренного варианта здесь, в некоторых версиях может быть не предустановлено плагина CAD Image DLL. Чтобы избежать возможных проблем в будущем рассмотрим, как инсталлировать указанный плагин в IrfanView:
После проделанных манипуляций в интерфейсе IrfanView откроется выбранный вами SVG-файл. Также вместо проделывания описанной в статье инструкции вы можете просто перетащить нужный файл в окно OpenOffice прямо из “Проводника”. Программа тоже его откроет корректно.
Это были основные программы, предназначенные для открытия файлов формата SVG. Есть и другие программы, позволяющие выполнить указанные операции, но логика работы в них практически не отличается от рассмотренных в статье программах.
Что такое файлы SVG, и какими программами они открываются
Форматов для изображений существует очень много, но все они делятся на два больших класса – растровые и векторные. Первые в основном используются для различной сложной и детальной графики, например, фотографии. В них каждый пиксель – мельчайший элемент – может иметь собственный цвет, и в файле, в общем, просто сохраняются цвета для каждой точки изображения. Конечно, используются разные методы, чтобы сжать размер информации, и от этого происходит много растровых форматов – 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.
К их числу относятся такие онлайн инструменты:
Перечисленные программы, сервисы и приложения наглядно показывают, что открывать и редактировать файлы формата SVG можно с помощью большого числа различных решений.
Вопрос лишь в том, что нужно конкретному пользователю.
Конечно, этими названиями список программ для работы с векторной графикой не исчерпывается. Их очень много, в том числе и самый популярный редактор Adobe Photoshop может сохранять изображения как векторы и имеет плагин для их открытия. Не стоит забывать и про популярнейший редактор векторной графики Corel Draw, который можно назвать самым популярным.
Что ещё может вызывать проблемы с файлом
Обычными средствами Windows, да и многих других операционных систем, файлы SVG не открываются. Чтобы видеть их содержимое и тем более редактировать их, нужно установить любой графический редактор с поддержкой этого формата.