При использовании SVG изображения в android приложении происходит потеря качества

#android #svg

Непонятно почему(для меня непонятно), при использовании svg изображения происходит
потеря качества изображения. Делал значок в illustrator. 

Код SVG изображения 



   
    
    




После преобразования в Vector asset(xml) получается следующий результат.
Смотреть на значок поиска.


    

Ответы

Ответ 1

Добавьте свою иконку в проект через Vector Assets и тогда не будет никаких проблем
с отображением.

Ну и вообще конвертация обычно нужна, просто потому что Android Studio не все может
скушать из того что выдает Иллюстратор в svg.

ДОПОЛНИТЕЛЬНО

Вот так будет выглядеть представленный вами код иконки после конвертации.


    
    
    



Размер указанный внутри векторной картинки, должен совпадать с размером изображения
в макете. Например, если в макете у вас вью 40dp, то в самой картинке должно быть так же.


    ...



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





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


Ответ 2

Причинами такого поведения svg может быть совмещение нескольких причин:


Вы нарисовали очень большую иконку 500 х 500px и затем ваш гаджет,
перед выводом на дисплей  сжимает иконку примерно в 16 раз.
svg изображение теоретически не должно подвергаться размытости при изменении масштаба.
Но на практике замечено, что svg прекрасно работает без потери качества при увеличении
исходного изображения, но не всегда сохраняет качество при уменьшении масштаба.  
Всё зависит от качества прорисовки и знаний дизайнера, создающего иконку.
Например в вашем случае,- вместо заполнения цветом ручки лупы использованы
очень толстые линии, которые перекрывают друг друга. То же самое сделано в обводке
самой лупы. 
При изменении масштаба векторные линии увеличиваются, уменьшаются пропорционально,
при этом ведут себя своеобразно,- половина толщины линии располагается внутри контура,
вторая снаружи. При неблагоприятном выборе ширины линии появляются такие эффекты, как
у вас.    
Вы не видели этой пикселизации на мониторе компьютера, потому-что
недостаточно уменьшили масштаб.  Причем нужно смотреть в Firefox`e
Последние версии Chrome научились сглаживать эти дефекты.


Пример с уменьшением масштаба в 16 раз 








     

Вот как это выглядит в FF при уменьшении окна браузера

       

На ретина дисплее будет выглядеть также, как у вас. 

Что можно посоветовать в вашем случае:


Выбирать готовые, стандартные svg иконки,  их нетрудно найти


. 
Принцип один,- чем меньше вес в байтах, тем более профессионально сделана иконка.        


Хочется сделать, что-то самому, выбирайте в векторном редакторе
размер документа

примерно равный размеру будущей иконки 32 х 32 64 х 64 128 x 128     
Рисуйте по возможности только патчами.    


В ваше примере попробуйте убрать масштабирование обводки линий командой 

vector-effect:non-scaling-stroke;  


Ниже пример кода: 










Update 

Пара иконок search.svg, попробуйте, может подойдёт в ваше приложение