What is the best way to create websites with vector elements?

Question

css

I'm learning layout. Now I'm designing the site according to the layout . On the first screen, there are many vector smart objects (crosses, shapes). I want the site to be responsive. I use Photoshop to view the PSD. Please tell me the best practices for layout with similar elements.

Answer 1

If not too lazy, then you can save each shape separately (preferably in svg) and position it on the background, so the shapes will have a floating position and on other screens you can rebuild differently, remove half on mobile, etc.. it will look something like So :

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%