Как лучше верстать сайты с векторными элементами?

Question

[RechAS]

Учусь верстке. Сейчас верстаю сайт по макету. На первом же экране есть множество векторных смарт объектов (крестики, фигуры). Хочу, сайт был адаптивным. Для просмотра PSD использую Photoshop. Подскажите, пожалуйста, лучшие практики по верстке с подобными элементами.

Comments

[Rustam Bainazarov]

Фон или элементы на absolute. Или и то, и то другое одновременно.

Answer 1

[Виталий Першин]

Если не лень, то можно сохранить каждую фигуру отдельно(желательно в svg) и позиционировать на фоне, таким образом у фигур будет плавающая позиция и на других экранах можно перестроить по другому, убрать половину на мобильных и т.д.. выглядеть это будет примерно так :

background: url(../images/other/decor-figure-1.svg) no-repeat 53% 6%,
            url(../images/other/decor-figure-2.svg) no-repeat 45% 22%,
            url(../images/other/decor-figure-3.svg) no-repeat 82% 22%,
            url(../images/other/decor-figure-4.svg) no-repeat 45% 96%,
            url(../images/other/decor-figure-5.svg) no-repeat 83% 82%

Comments

[xdevelx]

Да там пара десятков свг файлов получится. Ради фона 20 файлов придётся браузеру грузить? Ну я понимаю, если с ними нужно параллакс или анимации делать, да и то тогда лучше заинлайнить. Для адаптации проще 3 разных свг сохранить для разных экранов и медиа запросами менять фон. Но в каждом свг будут все фигуры и файл будет 1 грузиться.

[Виталий Першин]

xdevelx, 20 маленьких svg могли пугать в 2010, но никак не в 2021, они ничем вам не навредят и да в конечном варианте все это можно превратить в параллакс или просто анимировать перестраивая позиции, а вы можете без проблем добавить в ответы свой вариант.

[xdevelx]

Виталий, Если говорить про 2021 то стоит не делать 20 запросов ненужных а использовать fragment в урле и подключать один svg файл https://css-tricks.com/svg-fragment-identifiers-work/

[Виталий Першин]

xdevelx, то есть вы слышали о спрайтах и проблема запросов притянута за уши? Может вы еще и про http2 слышали?

[xdevelx]

Виталий, явно не любой хостер предоставляет поддержку http 2 на своих серверах.
В макете из вопроса ТС около 50 этих свг фигур разных. Без необходимости параллаксов и анимаций в ТЗ использовать multiple background это приключение минимум на пару часов. Сами то решились бы на это без явной необходимости?

[Виталий Першин]

xdevelx, Вопрос не об оптимизации и как мы выяснили выше это даже не является проблемой, просто выбор между готовыми решениями.

В макете из вопроса ТС около 50 этих свг фигур разных.

Почему вы не рассматриваете вариант объедения в группы? Просто проявите фантазию.

Сами то решились бы на это без явной необходимости?

Да, я буквально недавно делал нечто подобное.

это приключение минимум на пару часов.

Поэтому первые мои слова были: "Если не лень"

[xdevelx]

Виталий, Так это вы не рассматриваете объединение в группы изначально. Я то к тому и вел и сам бы только так и делал.

[Виталий Першин]

xdevelx,

Так это вы не рассматриваете объединение в группы изначально.

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

Я то к тому и вел и сам бы только так и делал.

Я не знаю к чему вы вели, я просто предлагаю вам варианты чтобы вас успокоить. Я бы предложил заказчику (поскольку я фрилансер) реализовать параллакс и в 90% случаев получил бы одобрение.

[Иван Шашков]

Виталий, а что за группы не подскажете, может что почитать на эту тему есть?

[Виталий Першин]

Иван Шашков, Вместо одной фигуры сохранить в одну картинку несколько рядом стоящих. на счет почитать не подскажу

[Иван Шашков]

Виталий, а, понял, просто объединить свг.