2

Для начала предыстория - Попался мне на разработку лендинг, где на фоновое изображение была поставлена некая футуристическая картинка с геометрическими фигурками

изображение с фигурками

поскольку сайт планируется быть высоконагруженым, а отдавать пользователю ещё на входе >1мБ на фоновом изображении -это плохо, мною было принято решение перевести данную картинку в SVG

body {
  position: relative;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  width: 100%;
  height: 100%;
  min-height: 1000px;
  min-width: 320px;
  background: #190710 url("тут адресс") 50% 50%;
  background-size: cover;
}
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 3200"><symbol id="svgBackgroundSymbol"><style>.st3{fill:#fff}.st2{fill:rgba(255,255,255,.4)}</style><radialGradient id="SVGID_1_" cx="960" cy="800" r="1160.95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e51b73"/><stop offset=".435" stop-color="#ad1e4f"/><stop offset=".753" stop-color="#4c1327"/><stop offset="1" stop-color="#040001"/></radialGradient><defs><filter id="myGauss2"><feGaussianBlur stdDeviation="2"/></filter><filter id="myGauss5"><feGaussianBlur stdDeviation="5"/></filter><filter id="myGauss8"><feGaussianBlur stdDeviation="8"/></filter><filter id="myGauss10"><feGaussianBlur stdDeviation="10"/></filter><filter id="myGauss20"><feGaussianBlur stdDeviation="20"/></filter><filter id="myGauss30"><feGaussianBlur stdDeviation="30"/></filter></defs><path fill="url(#SVGID_1_)" d="M0 0h1920v1600H0z"/><radialGradient id="SVGID_2_" cx="1455.315" cy="589.163" r="282.028" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f6ca"/><stop offset="1" stop-color="#fff" stop-opacity=".4"/></radialGradient><radialGradient id="SVGID_3_" cx="1330" cy="88.113" r="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e51b73" stop-opacity=".3"/><stop offset=".694" stop-color="#f5bec9" stop-opacity=".231"/><stop offset="1" stop-color="#fff" stop-opacity=".2"/></radialGradient><radialGradient id="SVGID_4_" cx="1750" cy="917" r="132" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f4f9f0" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity=".1"/></radialGradient><radialGradient id="SVGID_5_" cx="1075" cy="1510" r="25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f6ca"/><stop offset="1" stop-color="#fff" stop-opacity=".1"/></radialGradient><radialGradient id="SVGID_6_" cx="500" cy="1171" r="100" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e51b73" stop-opacity=".8"/><stop offset=".694" stop-color="#f5bec9" stop-opacity=".384"/><stop offset="1" stop-color="#fff" stop-opacity=".2"/></radialGradient><radialGradient id="SVGID_7_" cx="500" cy="1171" r="100.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f6ca" stop-opacity=".7"/><stop offset="1" stop-color="#fff" stop-opacity=".1"/></radialGradient><radialGradient id="SVGID_8_" cx="680" cy="1010" r="216" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e51b73" stop-opacity=".8"/><stop offset=".694" stop-color="#f5bec9" stop-opacity=".592"/><stop offset="1" stop-color="#fff" stop-opacity=".5"/></radialGradient><radialGradient id="SVGID_9_" cx="1556.25" cy="1271" r="150" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".5"/><stop offset="1" stop-color="#fff" stop-opacity=".05"/></radialGradient><radialGradient id="SVGID_10_" cx="1556.25" cy="1271" r="150.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f6ca" stop-opacity=".7"/><stop offset="1" stop-color="#fff" stop-opacity=".1"/></radialGradient><radialGradient id="SVGID_11_" cx="1690.483" cy="397.715" r="109.42" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e51b73" stop-opacity=".8"/><stop offset=".694" stop-color="#f5bec9" stop-opacity=".384"/><stop offset="1" stop-color="#fff" stop-opacity=".2"/></radialGradient><radialGradient id="SVGID_12_" cx="1690.483" cy="397.715" r="109.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7f6ca" stop-opacity=".7"/><stop offset="1" stop-color="#fff" stop-opacity=".1"/></radialGradient><circle cx="1333.8" cy="1160.1" r="111.2" filter="url(#myGauss8)" fill="#e02769"/><path d="M1455.3 307.1c-155.8 0-282 126.3-282 282s126.3 282 282 282c155.8 0 282-126.3 282-282s-126.2-282-282-282zm0 525.1c-134.2 0-243-108.8-243-243s108.8-243 243-243 243 108.8 243 243-108.8 243-243 243z" filter="url(#myGauss10)" fill="url(#SVGID_2_)"/><circle class="st3" cx="1849.6" cy="597.4" r="8" filter="url(#myGauss2)"/><circle class="st3" cx="1650" cy="600" r="3" filter="url(#myGauss2)"/><circle cx="1750" cy="916.5" r="130" filter="url(#myGauss10)" fill="url(#SVGID_4_)"/><circle class="st3" cx="1750" cy="1240" r="12" filter="url(#myGauss5)"/><circle cx="1330" cy="88.1" r="50" filter="url(#myGauss10)" fill="url(#SVGID_3_)"/><circle class="st2" cx="1591.1" cy="1150.1" r="10" filter="url(#myGauss5)"/><circle class="st2" cx="1350" cy="1310" r="25" filter="url(#myGauss5)"/><circle cx="1556.3" cy="1271" r="150" filter="url(#myGauss20)" fill="url(#SVGID_9_)" stroke="url(#SVGID_10_)" stroke-miterlimit="10"/><circle class="st3" cx="960" cy="1350" r="3" filter="url(#myGauss2)"/><circle cx="1581.1" cy="617" r="121.4" filter="url(#myGauss30)" fill="#c02a85"/><path class="st3" d="M921.8 971.5c-70.7 0-128 57.3-128 128s57.3 128 128 128 128-57.3 128-128-57.3-128-128-128zm0 247.6c-66 0-119.6-53.5-119.6-119.6s53.5-119.6 119.6-119.6 119.6 53.5 119.6 119.6-53.6 119.6-119.6 119.6z" filter="url(#myGauss20)"/><circle cx="1075" cy="1510" r="25.2" filter="url(#myGauss10)" fill="url(#SVGID_5_)"/><circle class="st3" cx="637" cy="1278" r="7" filter="url(#myGauss5)"/><circle class="st3" cx="396" cy="1320" r="4" filter="url(#myGauss2)"/><path d="M500 1071c-55.2 0-100 44.8-100 100s44.8 100 100 100 100-44.8 100-100-44.8-100-100-100zm0 192.4c-51 0-92.4-41.4-92.4-92.4 0-51 41.4-92.4 92.4-92.4 51 0 92.4 41.4 92.4 92.4 0 51-41.4 92.4-92.4 92.4z" filter="url(#myGauss5)" fill="url(#SVGID_6_)" stroke="url(#SVGID_7_)" stroke-miterlimit="10"/><path d="M1690.5 288.3c-60.4 0-109.4 49-109.4 109.4 0 60.4 49 109.4 109.4 109.4 60.4 0 109.4-49 109.4-109.4 0-60.4-49-109.4-109.4-109.4zm-9.4 211.2c-51 0-92.4-41.4-92.4-92.4s41.4-92.4 92.4-92.4c51 0 92.4 41.4 92.4 92.4s-41.4 92.4-92.4 92.4z" filter="url(#myGauss10)" fill="url(#SVGID_11_)" stroke="url(#SVGID_12_)" stroke-miterlimit="10"/><path d="M680 794c-119.3 0-216 96.7-216 216s96.7 216 216 216 216-96.7 216-216-96.7-216-216-216zm0 406.3c-105.1 0-190.3-85.2-190.3-190.3 0-105.1 85.2-190.3 190.3-190.3s190.3 85.2 190.3 190.3c0 105.1-85.2 190.3-190.3 190.3z" filter="url(#myGauss8)" fill="url(#SVGID_8_)"/></symbol><use xlink:href="#svgBackgroundSymbol"/><use y="1600" xlink:href="#svgBackgroundSymbol" transform="scale(0 1600 1 -1)"/></svg>

В сжатии я конечно выиграл (раз в 150), но вылез баг. Фото, в проекте, я вставляю как background: стиль для body (не нашёл как добавить в встроенном редакторе кода). И тут получаю ужасные тормоза при при скроле страници. Они прям физически ощущаются.Может кто-то посоветовать как решить? Ещё не могу понять почему хотя я и задаю размер width:100%; но без свойства background-size: cover; мой фон не растянут по всей ширине экрана ? (Хотя я само SVG отрисовывал под разрешение 1920х3200px в Иллюстраторе)

1 ответ 1

1

Вообщем перешерстив тучу форумов удалось частично ответить на свой вопрос. Может кому-то ещё поможет. Для того что б при скролле не тормозило SVG заданное фоновой картинкой в body вставляем в него атрибут preserveAspectRatio="xMinYMin meet" а в стилях body{ will-change:scroll-position; } теперь фон не просаживает страницу при прокрутке. Хотя на вопрос почему при разрешении SVG 1920х3200px Эта svg-шка не занимает всё пространство монитора если не указывать background-size: cover; я ответа пока не нашёл. Буду рад если кто-то объяснит

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.