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

Доброго времени суток всем.
Возможно вопрос покажется общим, но прощу прощения и хочу совета от профессионалов верстки.
Многие сейчас элементы интерфейса при веб-верстке делаются с помощью svg-элемнтов: иконки, картинки, векторные графики, кнопки, пункты меню... Вот собственно интересно, как правильнее работать, а точнее какие принципы более правильные с SVG-графикой при верстке проекта? Как подключается SVG, какие-то нужны библиотеки или это уже автоматом встроено в браузеры? Хелп по свг-верстке проситься прям вот...
  • Вопрос задан
  • 5488 просмотров
Пригласить эксперта
Ответы на вопрос 8
AMar4enko
@AMar4enko
Самый толковый и наиболее широко поддерживающийся способ это 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 такое не прокатит
Ответ написан
@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/
Ответ написан
@Haoss
html-верстальщик
Ответ написан
Комментировать
FreedomRun
@FreedomRun
веб-программист
Вот очень хорошая статья: https://24ways.org/2014/an-overview-of-svg-sprite-... (если Вы с английским дружите). И хороша она не своим содержанием, а разделом "PREREQUISITES": в нём собраны несколько статей для "новичков". Пробегитесь по ним и всё станет гораздо понятнее.
Ответ написан
Комментировать
besogonskiy
@besogonskiy
работаю php laravel разработчиком.
Просто конвертируешь файл в 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 увеличивает размер файла.
Ответ написан
cyber-jet
@cyber-jet
Как по мне, на сегодня проще всего использовать шрифт.
Ответ написан
Комментировать
@zeroplay
расскажите потом через какой период времени вернетесь на использование png)) о полезности и рациональности использования svg ничего плохого сказать не могу. но, когда соберетесь тестировать кроссбраузерность, обратите внимание на то, как с svg работает safari, точнее говоря как он по своему неработает.
вообще, чем больше общения с apple софтом тем больше ощущение, что их политика - пляшите под нашу дудку и не смотрите на остальных, ну т.е. иногда кажется что под них нужно писать абсолютно индивидуальные реализации)
Ответ написан
Комментировать
@pwnography
Почему просто не собрать спрайт из .svg, как мы делаем с обычными .png?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы