открыть векторное изображение на телефоне
Чем проще всего открыть 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
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Еще до появления умных мессенджеров, когда видеосвязь только начинала просачиваться в нашу жизнь, под термином «созвониться в Интернете» всегда подразумевался Skype. Приложением пользовались все: начиная с подростков, собравшихся обсудить выход новой компьютерной игры, до сотрудников крупных предприятий, готовящих отчет за первый квартал. Тогда казалось, что проект от компании Microsoft ждет по-настоящему грандиозное будущее. А в недавней презентации Windows 11 подопечные Билла Гейтса акцентировали свое внимание на Microsoft Teams и окончательно загубили проект. Объяснить данное решение представляется крайне трудной задачей.
Перейти с одной операционной системы на другую очень сложно. Но куда сложнее приходится пользователям, которые имеют устройства разных брендов. Для них заставить свои гаджеты работать вместе и вовсе будет большой проблемой. Но есть много приложений и просто трюков, которые позволяют обойти такие моменты. Многие думают, что перенести что-то из iCloud невозможно, и все работает только внутри экосистемы Apple. На самом деле это не так, и в данной статье я хочу рассказать о том, как это работает и как можно осуществить такой перенос буквально за несколько действий.
Достаточно долгое время мы занимаемся разработкой детских приложений под 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 — пишите в комментариях. Будем рады услышать Ваш опыт.
OutOfMemory и использование векторных изображений в Android Studio
1. Используйте векторные изображения вместо растровых
Конечно, большие изображения с множеством мелких деталей не стоит переводить в вектор — это займёт столько же места, как и растр, если не больше. Однако мелкие изображения, вроде иконок и остальных деталей пользовательского интерфейса следует конвертировать в вектор в целях экономии памяти. Да и работать с векторными изображениями зачастую гораздо удобнее. А теперь, самое главное — как это сделать?
Больше сканирований — больше цветов, оттенков и деталей. Моему лепрекону, чтобы приобрести божеский вид, по причине большего количество цветов в изображении понадобилось 30 сканирований. Это довольно много, лучше делать не больше десяти и выбирать картинки попроще.
Разница почти что в два раза. Думаю, это достаточно убедительно.
2. Увеличьте размер «кучи»
Для этого перейдите в манифест вашего проекта (app > manifests > AndroidManifest.xml) и в колонке application добавьте строку:
По сути, увеличение «кучи» — это не решение проблемы OutOfMemory, а её задвигание на дальнюю полку. Вместо того, чтобы оптимизировать использование приложением памяти устройства, мы даём ему больше места. Не стоит забывать и то, что у каждого устройства свой объём памяти, как основной, так и дополнительной, выделяемой под приложение.
3. Избегайте утечек памяти
Любое приложение в своей работе использует множество объектов, которые, естественно, занимают определённое место в памяти. В идеале, сборщик мусора должен удалять из неё неиспользуемые объекты, но иногда появляются так называемые «утечки памяти», которые вызывают серьёзные проблемы в работе приложения. Существуют различные причины утечек памяти, о которых подробно рассказано тут.
От себя хотел бы посоветовать библиотеку WeakHandler, разработанной компанией Badoo, и призванной устранить утечки памяти, связанные с неправильным использованием android.os.Handler. Для использования данной библиотеки добавьте в свой gradle-файл (Gradle Scripts > build.gradle (Module:app)) в колонку dependencies строку:
И не забудьте импортировать сам WeakHandler, если студия не сделала это автоматически.
4. Избегайте больших покадровых анимаций
Покадровая анимация в Android Studio — штука удобная, но далеко не самая экономичная. При использовании в ней большого количества изображений, вы непременно получите OutOfMemory.
Но, если уж вам это очень понадобилось, лучше используйте gif-изображение вместе с библиотекой Android Gif Drawable. Эта библиотека упрощает работу c gif, а также потребляет гораздо меньше памяти, чем покадровые анимации Android Studio. Для использования данной библиотеки добавьте в свой gradle-файл (Gradle Scripts > build.gradle (Module:app)) в колонку dependencies строку:
и в свой второй gradle-файл (Gradle Scripts > build.gradle(Module:«название вашего приложения»)) в колонки buildscript и allproject строку:
Для отключения gif вместо start() пишем stop(). Также не забывайте сжать gif-ки, это сэкономит ещё больше места.
Надеюсь, что моя статья была вам полезна. Спасибо.
Легко переходим на векторный формат картинок вместо нарезки под разные плотности экранов в Android 4.0+. Часть 1 из 2
Обычно дизайн приложения рисуется в векторном редакторе (например, Sketch), но типичным форматом картинок в приложении под Android является растровый (как правило, PNG). При разработке приложения необходимо для каждого векторного изображения заниматься утомительной работой по изготовлению набора растровых картинок для разных плотностей экранов. Количество таких комплектов может доходить до шести по числу возможных плотностей: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi (плотность xxxhdpi необходима только для иконки приложения). При верстке иногда приходится задать в разметке явные размеры для изображения, что может потребовать перемасштабирования растровой картинки, а это, в свою очередь, наверняка приведет к появлению артефактов. К тому же наличие нескольких комплектов картинок отрицательно сказывается на размере выходного apk.
Все решают эти проблемы по-разному: кто-то пытается подключить SVG-библиотеку к проекту, кто-то генерирует нарезку с помощью утилиты.
Как мне кажется, наиболее правильным решением является отказ от использования растровой графики в приложении в пользу векторной. При этом хотелось бы по максимуму задействовать системные возможности. В Android 5.0 появился VectorDrawable – поддержка векторного формата для картинок, которые размещаются в виде ресурсов с расширением xml в папке drawable. На такие картинки можно ссылаться обычным образом из XML-разметки.
Использование VectorDrawable было бы отличным решением, если бы не необходимость поддержки устройств с Android 4.0+, коих большинство. VectorDrawable нет в support library и неизвестно, когда он там появится (хотя начало положено). Но не стоит печалиться: есть замечательная библиотека BetterVectorDrawable с открытым исходным кодом и лицензией Apache 2.0, которая фактически переносит VectorDrawable на Android 4.0+, предоставляя тот же интерфейс, и позволяет при необходимости использовать системный VectorDrawable на Android 5.0+. Нужно отметить, что есть еще пара аналогичных библиотек, но они не стоят Вашего внимания, поскольку не дают полноценно ссылаться на vector drawable ресурсы из разметки.
К сожалению, разработчики Android не предусмотрели поддержку в VectorDrawable градиентов, текстур, масок. Это небольшая проблема, но об этом следует помнить при составлении дизайна приложения. Если от этих элементов невозможно отказаться, то можно как прежде использовать в отдельных местах растровую графику / shape drawable, преимущественно перейдя на вектор.
Библиотека BetterVectorDrawable
Подключаем библиотеку
Чтобы подключить библиотеку к приложению достаточно добавить одну строчку в секции dependencies файла build.gradle, расположенном в директории модуля приложения:
Библиотека распространяется через репозиторий JCenter, который используется по умолчанию в новых проектах Android Studio.
Если Вы создавали проект давно, то, возможно, у Вас используется репозиторий Maven Central. Чтобы это проверить, надо в файлах build.gradle поискать вхождения строки
и добавь рядом с ней
Включаем перехват ресурсов
И указать этого наследника в манифесте приложения:
Существует три способа передать список: удобный, быстрый и ручной.
Удобный способ
Метод findAllVectorResourceIdsSlow сканирует все drawable XML-ресурсы и убеждается, что каждый возвращаемый ресурс является vector drawable. Разработчики советуют использовать этот метод по умолчанию, тем не менее, это наименее производительный способ, т.е. на старых устройствах время запуска приложения может существенно возрасти.
На Google Nexus 5 в приложении с 400 векторными ресурсами findAllVectorResourceIdsSlow отрабатывает менее чем за 150 мс.
Быстрый способ
На Google Nexus 5 в приложении с 400 векторными ресурсами findVectorResourceIdsByConvention отрабатывает менее чем за 20 мс.
Ручной способ
Просто передается список всех идентификаторов векторных картинок. 0 мс.
Используем vector drawable
Как видите, все просто.
Если у Вас возникли вопросы, то можно задать их мне либо посмотреть демо-приложение. О проблемах с библиотекой лучше сообщать разработчикам в GitHub.
В следующей части мы обсудим конвертацию изображений из SVG в vector drawable XML.
Векторную графику, созданную в программе Corel Draw, нельзя открыть обычным просмотрщиком изображений, встроенным в операционную систему Windows. Для этого необходимо установить приложение, работающее с форматом CDR, или же конвертировать файл в другой формат.
В этой статье мы познакомим вас с сервисами, приложениями и конвертерами, которые можно использовать для открытия и редактирования проектных файлов Corel Draw.
Какой программе принадлежит формат файла CDR
CDR – файл проектов программы Corel DRAW, который содержит растровый рисунок или векторное изображение. Данный формат создан специально для этого графического редактора. Права на использование формата CDR принадлежат компании Corel, то есть в других программах для работы с компьютерной графикой такие файлы не могут быть запущены. Однако существуют онлайн-сервисы, конвертеры и приложения, позволяющие открывать файлы формата CDR.
Онлайн-сервисы для просмотра и работы с файлами CDR
Открыть CDR online, потребуется современный браузер и стабильное подключение к интернету. На таких платформах предусмотрены инструменты для работы с векторной графикой и растровыми картинками, а также для приема донатов.
Fviewer
Эта онлайн — программа для просмотра CDR файлов. Изображение загружается на главной странице онлайн-просмотрщика. После добавления в сервис исходный рисунок можно зумировать и перемещаться по нему стрелочками. При загрузке файла выбирается формат и разрешение. Например, при плохой скорости интернета можно установить низкое разрешение, чтобы загрузилась уменьшенная версия векторного изображения.
На других страницах Fviewer представлены конверторы для решения других задач по конвертации. К примеру, данный сервис можно использовать для просмотра офисных документов или SVG-файла. Процедура открытия файла занимает не более 13 секунд.
Ofoct
Бесплатный онлайн-конвертер для графики. Без поддержки русского языка. Кроме всего прочего он позволяет редактировать аудиофайлы, воспользоваться онлайн-калькулятором и даже попытаться переделать формат электронной книги в более известный.
Онлайн-конвертеры
Это веб-приложения, позволяющие своим пользователям бесплатно или же после оплаты выбранного тарифа конвертировать файл из одного формата в другой. Практически у всех онлайн-конвертеров есть бесплатный тестовый период. Во время подобного теста пользователь может оценить функционал сервиса, сохранив CDR-рисунок в виде JPG.
Zamzar
Иностранный сервис для конвертации файлов. Поддерживает более 1100 различных форматов. Также доступен в виде расширения для браузера Google Chrome. Для того чтобы конвертировать векторное изображение, необходимо загрузить исходный файл на главной странице сервиса и указать требуемый формат. После клика по кнопке « Convert Now » начнется преобразование рисунка. Процедура занимает 10-15 секунд (зависит от объема исходного файла).
fConvert
Русскоязычная платформа для конвертации файлов в различные форматы. Справляется со своей задачей достаточно быстро. Платных тарифов у этого онлайн-конвертера нет.
Один из преимуществ данного сервиса заключается в том, что он позволяет работать как с файлами, сохраненными на компьютере, так и с находящими в онлайне.
Программы для просмотра CDR файлов
У бесплатного программного обеспечения функционал существенно ограничен. С его помощью можно открывать CDR-файлы, создавать векторные изображения и осуществлять их простое редактирование.
Inkscape
Бесплатный редактор векторной графики. Подходит для простых пользователей, профессиональных дизайнеров, студентов вузов. Кроме открытия CDR-файлов программа подходит для создания векторных изображений с нуля. Она поддерживает работу со слоями, заливкой, обводкой, а также трассировку и другие полезные функции.
IrfanView
Бесплатная программа для просмотра CDR файлов. IrfanView также умеет работать с видео и аудио. Этот редактор совместим со всеми версиями операционной системы Windows и не требователен к производительности компьютера. Программа быстро открывает любые графические файлы, независимо от их размера. Кроме всего прочего данное программное обеспечение поддерживает работу со сторонними плагинами.
Adobe Illustrator
Это платное приложение для работы с векторной графикой. Профессиональные дизайнеры используют его для отрисовки книжных обложек, рекламных плакатов, открыток и другой типографической продукции. Родным форматом Adobe Illustrator считается AI, однако данный редактор действительно способен открыть проекты с расширением CDR. Вместе с тем, режим цветности и профиль при открытии файла будет преобразован.
ideaMK CDR Viewer
Бесплатная программа и просмотрщик CDR файлов. Позволяет конвертировать рисунок в любой другой растровый формат и осуществлять простое редактирование изображения (изменение размеров, поворот, масштабирование и т. д.). У CDR Viewer максимально простой пользовательский интерфейс. Есть кнопки для открытия файлов, масштабирования, поворота и сохранения. Редактор запускается на всех версиях операционной системы Windows.
Программа позволяет сохранить CDR-файл в одном из следующих форматов: JPG, BMP, TIFF, GIF, PNG. При конвертации не применяется сжатие, поэтому качество изображения сохраняется на исходном уровне.