alex_web64

Качественное отображение svg-иконок

Recommended Posts

Здравствуйте.

Сейчас все большую популярность набирает вывод иконок на сайте с помощью тегов svg>use.

Для создания наборов я использую сервис IcoMoon. Проблема в том, что при выводе одной и той же иконки с помощью шрифта и тегом качество последней оставляет желать лучшего. Если на больших размерах разница не так заметна, то на маленьких все совсем плохо (см. скрин. Иконка menu c набора FontAwesome).

В интернете находил советы применить к тегу svg transform: translateZ(0); или shape-rendering: crispedges; В случае с иконкой-бургером это решает проблему, но с чем-то более сложным результат выходит еще хуже, чем был до этого.

Еще и ФФ при некоторых размерах шрифта обрезает иконки на несколько пикселей. При этом иконочный шрифт работает превосходно отображает любые иконки и в любом размере.

Как мне добиться такого же качества, как у иконочных шрифтов?

 

icons.png

Share this post


Link to post
Share on other sites

А у вас точно svg? судя по скрину там jpg какой то. 
Лучше бы вы пример показали. Чем словами описывали проблемы. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,514
    Total Members
    3,128
    Most Online
    e1pavlovitch
    Newest Member
    e1pavlovitch
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.