Как вы используете SVG?

Question

[Александр]

Есть меню, хочу PNG заменить на SVG. Вопрос, как лучше, так: background: url('/icon.svg') или конвертировать в base64?

Answer 1

[Евгений Петров]

Разница между background: url('...') и background: url(...)? (см. пример)
Как менять заливку и/или контур svg в CSS при условии, что *.svg в фоне?

Comments

[Евгений Петров]

MAG-FRAG: А какая разница — использовать в разметке HTML или SVG?) Картинку поменял, элементы поменялись.

[Евгений Петров]

MAG-FRAG: А вы и не лезете. Есть SVG, в котором описаны символы. Есть SVG, использующие id символов. Размеры этих SVG описаны в CSS. Я поменял картинку (тот самый SVG с символами), описание размеров и никто не лезет в разметку, боже упаси:)

[Евгений Петров]

MAG-FRAG: Значит span воткнуть и прописать ему фоновую картинку — это гуд, а SVG вместо спана поставить — плохо?)
Схема с SVG, описывающим все символы и SVG, эти символы использующие вполне корректна и точно так же управляется без коррекции разметки.
Увы, webkit не поддерживает использование ссылок на символы в фоновых SVG-картинках, а так бы можно было и ваш вариант юзать.

Answer 2

[- -]

Если SVG несколько, то лучше base64. Будет меньше запросов к серверу.

Comments

[Александр]

Александр Александрович файлов не то, что несколько, а много будет.

[- -]

Александр: однозначно base64. Сократите время загрузки страницы.

[Евгений Петров]

Можно просто в utf8 написать код, который можно править без перекодирования.

[- -]

Евгений Петров: это само собой, здесь разговор не об этом.

[Евгений Петров]

Александр Александрович: Именно об этом.

background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="40" height="40" fill="rgba(51,102,204,1)"/></svg>');

jsfiddle.net/petroveg/cexbhq4e/6

[Александр]

Евгений Петров: я имел ввиду base64, ваш пример в некоторых брузерах плохо работает.

[Евгений Петров]

Александр: Это вы про IE8?) Так в нём SVG фоном и в base64 Не будет работать.

[Александр]

Евгений Петров: у меня в IE11 ваш пример при обновлении через раз работает и в мозиле не работает. Не знаю почему.

[- -]

Евгений Петров: Евгений, вы меня не верно поняли. Ну ничего страшного, вы всё верно пишете.

[Евгений Петров]

Александр: Да, проверил в IE — с utf8 проблемы. Так что да, из-за проблем с таким описанием увы, напрямую код не получится вставить.
Если найду корень зла в фоновых SVG для IE, сообщу:)