Какие методы верстки при работе с SVG-графикой?

Question

[xenuz]

Доброго времени суток всем.
Возможно вопрос покажется общим, но прощу прощения и хочу совета от профессионалов верстки.
Многие сейчас элементы интерфейса при веб-верстке делаются с помощью svg-элемнтов: иконки, картинки, векторные графики, кнопки, пункты меню... Вот собственно интересно, как правильнее работать, а точнее какие принципы более правильные с SVG-графикой при верстке проекта? Как подключается SVG, какие-то нужны библиотеки или это уже автоматом встроено в браузеры? Хелп по свг-верстке проситься прям вот...

Comments

[Андрей Самойленко]

а чем png не устраивает?

[LIAL]

png - растр, svg - вектор. Для адаптивного дизайна на порядок лучше + как было указано в определенных случаях предпочтительней тк уменьшается количество запросов к серверу

[Андрей Самойленко]

LIAL: по-моему это заморочки, можно и без svg прекрасно обойтись.

[LIAL]

Андрей Самойленко: Можно, но если так подходить к делу - можно и в шкурах ходить. Тут каждый сам выбирает какие фишки-плюшки использовать и когда начинать это делать;

[Ivan]

основное достоинство svg - это возможность быстрого масштабирования без весомой потери в качестве и возможность менять стиль оформления, например тот же цвет. не нужно хранить, например, иконку синего и красного цвета - достаточно иметь один свг которому можно задавать нужный стиль. плюс - ну он реально несравнимо меньше по размеру чем любой растр.
однако своё но - к svg, я высказал ниже

Answer 1

[_ _]

Самый толковый и наиболее широко поддерживающийся способ это svg-спрайты через xlink:href (поищите статью на хабре).
Смысл в том, что вы берете 100 мелких svg файлов и заталкиваете в один большой, помечая отдельные фрагменты идентификаторами.
Этот файл загружаете одним XHR-запросом и вставляете в DOM, после чего можете делать

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my-cool-icon"></use>
</svg>

У такого способа есть приятный плюс - спрайты можно перекрашивать через css. Извернувшись можно даже красить в два разных цвета (типа один элемент в красный, другой в синий), что невозможно с иконочными шрифтами.
Используя css в качестве background-image такое не прокатит

Comments

[xenuz]

спасибо

Answer 2

[kravchenko-me]

Дополню про svg спрайт, спрайт можно не вставлять в разметку, а положить в папку img/sprite.svg (для поддержки во всех ie и старых браузеров понадобится https://github.com/jonathantneal/svg4everybody) тогда файл будет кешироваться ,в разметке иконка будет вызываться

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite.svg#icon"></use>
</svg>

Помимо спрайтов svg вставляется инлайн в код разметки, можно стилизовать, как весь svg, так и отдельные и сгруппированные его части - path
На свг часто делают декоративные переходы между блоками (треугольные косые, пример - tympanus.net/codrops/2013/10/03/a-collection-of-se... )
Svg удобен тем что он идеально подходит для адаптивных сайтов, т.к. это векторный формат

В двух словах не рассказать всего - лучше почитать вот эти подборки по теме svg:
https://css-tricks.com/mega-list-svg-information/
https://sarasoueidan.com/tags/svg/

Comments

[Dark Hole]

А есть такие же статьи на русском?

[kravchenko-me]

Сам не искал, может быть и есть, как то натыкался на перевод статьи Сары по smil анимациям, а так в основном про спрайт пишут у нас, но все же читать лучше в первоисточнике

Тот же самый свг спрайт предложил если не ошибаюсь Крис Койер https://css-tricks.com/svg-sprites-use-better-icon... в марте 2014 и там эта тема быстро развивалась, у нас писать статьи про свг спрайт стали к середине-концу 2014, а широко стали использовать, как мне кажется с середины 2015

[kravchenko-me]

Вот пример хорошей русскоязычной статьи - nicothin.ru/page/svg-sprites

[kravchenko-me]

Dark Hole: если вопрос еще актуален https://svgontheweb.com/ru/

Answer 3

[Дмитрий Христоев]

https://www.youtube.com/watch?v=S0OnkpIoEyQ

Answer 4

[Пётр Попов]

Вот очень хорошая статья: https://24ways.org/2014/an-overview-of-svg-sprite-... (если Вы с английским дружите). И хороша она не своим содержанием, а разделом "PREREQUISITES": в нём собраны несколько статей для "новичков". Пробегитесь по ним и всё станет гораздо понятнее.

Answer 5

[Слава]

Просто конвертируешь файл в SVG и вставляешь этот код в страницу и все - была картинка файлом, стала картинка кодом. Это снижает число обращений к серверу при загрузке страницы. Иконки, логотипы можно преобразовывать к СВГ. Можно заставить их увеличиваться и уменьшаться при изменении размеров браузера.

avacode Умеет сохранять картинки в Svg. Сохраняешь в base64

Могу если хочешь пример показать. Картинка иконки социальной сети прям в стиль вставлена в формате svg

#social-fb {
display: inline-block;
width: 32px;
height: 32px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODA4M0VCODNDNjJCRDdDMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMUI1MjY2MEJENkIxMUU0OTEzQUEyQTJFM0MwQ0NGQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMUI1MjY1RkJENkIxMUU0OTEzQUEyQTJFM0MwQ0NGQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjc3RjExNzQwNzIwNjgxMTg3MUY4REJDRTNBN0M4MjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgwODNFQjgzQzYyQkQ3QzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kIhX5AAADhUlEQVR42sxXTWgTQRh9M/sT89u0ta3FCipIRfAiqYKgIHrTmzcV1ItWxIOnHq2Xgh70oFJBREUUPVgEqQcRFEEPUhQED6UgQltSa9u0aZpkd7OzfrOx1ZhsyTbGOrDZJPNN3pvve9+bDXMcB6s5VPlydTCDB3funqC3Z+jaWWfM93T1Hz154u75gxEwmYHE4WsXWtvbe3ckEmhuWVtX9OnvU/gwNITJZLJ36Mm5i24GwHCma/deGHYAo98KdSWga42QWIMDj2W2fxIAa8sYOmxRfz3kTQcW113MJQ3IUbBrB5d6liUt3n9ujS1ezL0Xsf4Q4eLiWoBt2sCCAcxkBNJZAdMCOAHqtNlYiKM5xhHWf5EoIyDEysFlWpMpgZlZgUOJIBJbdDREuDs/PGYhV3DwbCiHjS0cnDMPAs7KwA3LwVcS7tY2HbfPxRAN8ZKY7Zs1jIwVcP/1AuxmLgXvlQH/DOSaKdr1upCCy6finnGjkwUwipXx3iVYQQYsElNyWuBGd3zZuLEpG+Egh1MBpyYNSKHZeWDbJq3k++fvsuh/mgGjjOsEzDUH8QijkrEynBWXQNbfNAWCavm6/oE0HFJ/Q5xDpXldZdBUttSif6UExdYDlD+LKvtcMDQReCzCSvq/EobvEiyajYw3Tadi5mifKFB3mCZ5Af9lRJwvR6BKJ5KOmZoTmJi0kZqx0dFY/qvCtPHps4nAGgWKAkTJhNpbFcTC3LsLnCozYJDoFIvj7bU2z5gX19eXfJ6YtnG07zsiGygLSg1GJJNkkaulM/4E8zVZQN5w4B43tbShJODG+RTsF7JjXS2u9S5BlRqQVh4J+SMgrTocYhVxfJ+GGnlOljnYdXoccykSYRPHy5sdJTEHuscwSnWXIgwEGBpJqM1NSkUc3z7AKAUNDRzRKMf8PEd+tnwhVzk6OxVEwsXTj/FiGzrLEah2/P5woarFH69EUs6pWnnblZHFKo+lDMyOf/BpxQ6yWRNKoKvifDr5HoWQ7marKgJnj+3xfRbMU2/fepSuON99fD+iAeZZgr4rI6UE5nPCN4G5vLdy5+i5EIL9/xrgxd2IiZwp/hmoxJKYSwRsc+Hem7cf6em2/iQkhsSSmG7LSjXrgUCkc1/PJS3YeIQrWryeBIRtzVq51MPhV5d6TMPILBKQPhmkKyr/vqHs4fmvDalaU2rerYRh2D8EGAAgFp1Ic+BRBAAAAABJRU5ErkJggg==') center no-repeat;
}

Просто иконок может быть десятки и ради каждой отправлять запрос к серверу для загрузки - это накладно. А вот большие тяжелые картинки можно. Их не так будет ведь много. А SVG увеличивает размер файла.

Comments

[Юрий]

очевидно это не свг "data:image/png"
хотя свг конечно аналогично вставляется

[Слава]

Юрий: да. это файл в кодировке base64

[Юрий]

Павел Ушанников: я понимаю, сто раз так делал, но тут не свг )

[xenuz]

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

[Майк Фишер]

Просто иконок может быть десятки и ради каждой отправлять запрос к серверу :) злые SVG lol ваще

Answer 6

[Евгений]

Как по мне, на сегодня проще всего использовать шрифт.

Answer 7

[Ivan]

расскажите потом через какой период времени вернетесь на использование png)) о полезности и рациональности использования svg ничего плохого сказать не могу. но, когда соберетесь тестировать кроссбраузерность, обратите внимание на то, как с svg работает safari, точнее говоря как он по своему неработает.
вообще, чем больше общения с apple софтом тем больше ощущение, что их политика - пляшите под нашу дудку и не смотрите на остальных, ну т.е. иногда кажется что под них нужно писать абсолютно индивидуальные реализации)

Answer 8

[K G]

Почему просто не собрать спрайт из .svg, как мы делаем с обычными .png?