Как работает SVG-атрибут viewBox

Development | Amber | Комментировать запись

При первом знакомстве SVG-атрибут viewBox может сильно разочаровать, поскольку он использует инопланетный синтаксис типа viewBox=”0 0 50 50″. Неудивительно, что многие новички сталкиваются с проблемами при изучении viewBox.

В этой статье мы попробуем устранить путаницу и помочь вам разобраться, как работает атрибут viewBox.

Зачем нужен атрибут ViewBox?

Зачем вообще трогать viewBox, если он такой безумный? Действительно, вы можете создать рабочий SVG и без атрибута viewBox – однако вы лишите себя множества полезных возможностей, которые есть у этого атрибута.

ViewBox позволяет сделать так, чтобы SVG заполнил любой контейнер, в котором находится. Возьмем за пример это небольшое изображение птицы:

Если в этом изображении правильно установлен атрибут viewBox, изображение будет автоматически масштабироваться до размеров контейнера, а поскольку это SVG-файл, он будет выглядеть так же четко. То есть при помощи viewBox вы можете без потери качества масштабировать картинку 50х50 пикселей до 100х100 пикселей.

Кроме того, viewBox позволяет скрыть часть изображения, что может быть очень полезно для анимации.

Как видите, в отдельных ситуациях навык работы с атрибутом viewBox просто необходим. Давайте попробуем определить его.

Определение атрибута viewBox

ViewBox имеет четыре значения, которые разделяются пробелами или запятыми.

viewBox="0 0 100 100"
         | |  |   |
         ↓ ↓  ↓   ↓
         x y  w   h

Рассмотрим эти значения подробнее:

• x – минимальная координата x
• y – минимальная координата y
• w – ширина в координатах пользователя/пикселях
• h – высота в координатах пользователя/пикселях

Мы рассмотрели достаточно теории, пора применить ее на практике. Приступим к написанию кода!

Код атрибута viewBox

Сначала давайте рассмотрим код нашего SVG-изображения птицы:

<div class="bird-cage">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd">
      <path d="M45.212 65.097c2.41 3.751 3.846 4.016 7.306 1.375.383-.292 1.081-.226 1.567-.057 2.749.96 5.162.316 7.197-2.074 1.455-1.708 2.312-3.865 2.89-6.17 1.6-6.38 1.514-12.826.44-19.291-.113-.68-.476-1.3-.724-1.947-.369.57-.854 1.081-1.087 1.722-1.89 5.203-4.344 9.953-7.764 13.925-3.968 4.609-8.464 8.02-14.152 8.627-.75.08-.872.698-.709 1.4.305 1.308 1.03 2.244 2.15 2.456.91.171 1.86.034 2.886.034zm-4.008 34.687c-.461-.231-.91-.617-1.386-.67-4.197-.47-8.272-1.623-12.243-3.25C17.177 91.605 8.305 84.597 1.123 74.61c-.257-.358-.476-.753-.871-1.382.734.092 1.25.138 1.76.224 5.184.871 10.368 1.269 15.55.02 9.27-2.236 15.192-9.022 18.351-19.452 2.07-6.833 2.736-13.943 2.911-21.181.09-3.692.343-7.482 1.144-11.026 2.043-9.041 6.818-15.51 14.098-19.092 9.68-4.765 18.53-2.839 26.457 5.219a22.692 22.692 0 0 1 5.23 8.401c.834 2.36 2.216 3.795 4.153 4.788 3.041 1.56 6.01 3.323 9.008 5.004.208.117.404.265.763.503-.363.375-.624.71-.935.955-2.908 2.292-5.81 4.6-8.75 6.833-.98.745-1.397 1.654-1.458 3.056a118.393 118.393 0 0 1-2.229 18.437c-1.86 9.185-4.85 17.806-9.587 25.446-2.843 4.586-6.386 8.298-10.244 11.675-2.095 1.832-4.366 1.836-6.68 2.117-6.172.75-12.23 2.151-18.139 4.427-.091.035-.165.133-.247.202h-.204z" fill="#231F20"/>
      <path d="M45.211 65.098c-1.026 0-1.976.136-2.885-.035-1.12-.212-1.845-1.148-2.15-2.456-.163-.702-.042-1.32.709-1.4 5.689-.607 10.185-4.018 14.152-8.627 3.42-3.972 5.874-8.722 7.763-13.925.233-.641.72-1.151 1.088-1.722.247.647.612 1.267.724 1.947 1.074 6.465 1.16 12.911-.44 19.29-.578 2.306-1.435 4.463-2.89 6.171-2.035 2.39-4.448 3.034-7.197 2.074-.486-.169-1.184-.235-1.567.057-3.46 2.64-4.895 2.376-7.307-1.374M76.666 16c1.792-.025 3.213 1.83 3.255 4.246.04 2.42-1.43 4.442-3.224 4.432-1.725-.01-3.156-1.903-3.189-4.218-.035-2.497 1.337-4.435 3.158-4.46" fill="#FEFEFE"/>
    </g>
  </svg>
</div>

.bird-cage {
  height 100px;
  width: 100px;
  border: 1px solid green;
}

Итак, в коде выше у нас есть SVG, помещенный в div с именем класса bird-cage. Так это изображение SVG будет масштабироваться до размеров данного div.

Атрибут viewBox имеет значения 0 0 100 100, где «100 100» показывает изображение полностью и масштабируется до заданного контейнера (он называется bird-cage).

Размеры bird-cage также называются viewport – по сути это то, что мы видим. В приведенном выше примере наш viewBox идеально соответствует viewport.

Что, если бы мы хотели увеличить изображение? Для этого нужно увеличить viewBox в viewport. Давайте обновим код viewBox следующим образом:

0 0 75 75

Вот что мы получим в итоге:

Так это выглядит в браузере. На самом деле происходит следующее:

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

ViewBox умеет очень эффективно обрезать изображения. Самый простой способ кадрировать изображение – использовать минимальные координаты x и y. Допустим, если мы хотим показать только правую половину изображения, мы можем изменить viewBox на:

viewBox="50 0 100 100"

Это даст такой результат:

Вот что происходит внутри:

Ознакомиться с приведенным выше кодом можно здесь.

Создание анимации с помощью viewBox

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

Первое, что нужно сделать – это написать код:

<svg id="cloudSVG" width="1572" height="736"
     viewBox="-200 0 786 368" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <path d="M331.262 159.527v.1c.27 0 .54.007.81-.001 3-.089 6.023.06 8.969-.58 1.204-.261 2.483-.332 3.678-.611 1.608-.375 3.168-.862 4.744-1.31 1.298-.368 2.594-.74 3.882-1.126.49-.147.973-.317 1.43-.513.702-.305 1.37-.652 2.069-.96.846-.374 1.759-.674 2.555-1.1a63.867 63.867 0 0 0 3.92-2.281c1.657-1.043 3.3-2.103 4.87-3.219 1.039-.737 1.965-1.569 2.895-2.387 1.033-.908 2.06-1.825 3.006-2.784.791-.799 1.31-1.778 2.226-2.472 1.154-.875 1.636-2 2.451-2.993.613-.747 1.025-1.586 1.568-2.367.573-.822 1.262-1.602 1.776-2.444.503-.823.903-1.689 1.248-2.558.541-1.362.999-2.743 1.49-4.116.035-.098.052-.2.095-.295.383-.828.82-1.643 1.14-2.483.29-.76.521-1.539.66-2.322.269-1.532.668-3.075.634-4.608-.081-3.62.653-7.26-.463-10.864-.378-1.223-.057-2.492-.555-3.776-.549-1.418-.966-2.887-1.454-4.334-.374-1.115-.774-2.206-1.347-3.27-.68-1.26-1.262-2.55-1.966-3.802a42.914 42.914 0 0 0-2.1-3.367c-.829-1.2-1.739-2.37-2.646-3.537a18.586 18.586 0 0 0-1.536-1.769c-.765-.764-1.711-1.436-2.377-2.242-.872-1.057-2.013-1.912-3.155-2.781-1.207-.918-2.395-1.85-3.609-2.763-.726-.546-1.427-1.127-2.245-1.586-1.137-.638-2.446-1.105-3.548-1.77-1.935-1.168-4.08-2.046-6.295-2.847-.579-.21-1.182-.379-1.76-.591-.708-.26-1.378-.59-2.107-.808-.824-.247-1.742-.33-2.536-.617-1.298-.468-2.594-.885-4.05-.952a3.977 3.977 0 0 1-.499-.055c-1.738-.303-3.464-.647-5.214-.899-1.34-.193-2.724.097-4.071-.458-1.048-.432-1.533-.648-1.664-1.565-.198-1.373-.448-2.741-.676-4.111a1.399 1.399 0 0 0-.052-.225c-.381-1.095-.769-2.19-1.145-3.288-.189-.553-.343-1.115-.542-1.666-.262-.726-.563-1.444-.828-2.17-.281-.774-.482-1.567-.82-2.326-.58-1.306-1.225-2.595-1.872-3.882-.284-.566-.627-1.117-.968-1.666-.308-.492-.653-.97-.98-1.456-.38-.567-.755-1.137-1.14-1.703-.497-.737-.998-1.473-1.506-2.206-.389-.562-.771-1.127-1.19-1.676-.487-.64-1.013-1.264-1.52-1.897-.531-.664-.996-1.363-1.602-1.985-.954-.979-2.002-1.905-3.008-2.855-1.274-1.206-2.507-2.44-3.83-3.615-1.143-1.016-2.368-1.98-3.59-2.942a29.287 29.287 0 0 0-2.282-1.635c-1.409-.906-2.86-1.776-4.292-2.661-1.233-.762-2.406-1.59-3.711-2.272-1.507-.789-3.124-1.461-4.707-2.166-1.49-.663-3-1.3-4.495-1.955-.568-.249-1.102-.542-1.68-.772a56.59 56.59 0 0 0-3.094-1.148c-.714-.237-1.496-.357-2.22-.58-.89-.273-1.73-.645-2.632-.888-.94-.254-1.931-.4-2.895-.605-1.422-.303-2.839-.618-4.258-.93-.128-.029-.25-.075-.377-.102-1.285-.282-2.553-.627-3.861-.823-1.247-.186-2.51-.185-3.789-.422-2.188-.403-4.511-.547-6.773-.532-4.191.03-8.407-.403-12.574.358-1.492.273-3.048.024-4.605.441-1.648.441-3.514.406-5.271.638-.966.128-1.912.358-2.852.58-1.101.259-2.18.574-3.28.837-.904.217-1.857.33-2.728.6-1.9.59-3.76 1.254-5.637 1.886-1.13.38-2.292.712-3.387 1.143-1.574.62-3.136 1.265-4.634 1.982-1.525.73-2.955 1.573-4.447 2.345-2.382 1.232-4.709 2.512-6.791 4.033-1.437 1.05-3.021 1.99-4.406 3.076-1.756 1.377-3.414 2.827-5.04 4.29-1.315 1.182-2.528 2.426-3.764 3.655-.27.268-.423.602-.678.881-1.01 1.102-2.052 2.189-3.053 3.295-.326.36-.565.764-.84 1.15-.512.719-1.033 1.436-1.529 2.161-.584.854-1.157 1.713-1.716 2.576-.35.542-.661 1.098-.999 1.645-.329.532-.688 1.056-1 1.594-.464.8-.793 1.655-1.37 2.403-.715.925-1.845 1.147-3.123.777-.623-.18-1.23-.395-1.854-.573-1.104-.316-2.206-.638-3.328-.916-1.547-.384-3.095-.776-4.672-1.075-1.368-.259-2.777-.39-4.167-.58-.199-.028-.395-.067-.594-.093-2.176-.289-4.342-.761-6.53-.825-4.482-.131-8.979-.103-13.465-.019-2.043.038-4.076.363-6.113.558-.033.003-.066.012-.098.019-2.163.448-4.33.883-6.486 1.352-1.465.319-2.913.684-4.365 1.035-.664.16-1.323.326-1.978.5-.811.215-1.637.407-2.42.67-1.233.414-2.442.87-3.65 1.325-1.008.38-2.018.758-2.994 1.18-.908.392-1.767.845-2.657 1.26-.859.4-1.777.737-2.587 1.186-1.318.731-2.565 1.533-3.85 2.298-.946.562-1.963 1.067-2.843 1.683-1.068.747-2.047 1.569-3.028 2.384a282.72 282.72 0 0 0-4.368 3.71c-.86.745-1.713 1.5-2.511 2.283-.723.71-1.562 1.407-1.995 2.215-.597 1.115-1.842 1.914-2.285 3.114-.314.843-1.279 1.536-1.793 2.353-.582.927-.988 1.916-1.468 2.88-.274.552-.535 1.107-.816 1.657-.347.679-.77 1.34-1.05 2.034-.333.832-.526 1.696-.827 2.538-.365 1.021-.9 2.019-1.132 3.056-.163.723-2.184 1.687-3.098 1.45-1.206-.311-2.418-.66-3.667-.819-2.014-.257-4.054-.468-6.092-.525-3.323-.096-6.658-.235-9.958.337-.973.169-2.034.044-3.016.193-1.418.217-2.797.569-4.197.849-1.896.38-3.801.73-5.69 1.127-.6.127-1.165.353-1.738.549-.875.299-1.741.614-2.615.915-1.003.348-2.069.617-3.002 1.048-1.541.712-3.004 1.52-4.489 2.3-1.253.66-2.534 1.296-3.724 2.016-1.364.826-2.727 1.671-3.935 2.621-1.441 1.133-2.711 2.387-4.066 3.583-.41.361-.925.665-1.269 1.057-.773.88-1.46 1.803-2.2 2.7-.616.746-1.315 1.456-1.873 2.226-.684.94-1.282 1.918-1.871 2.896-.312.517-.547 1.06-.776 1.602-.303.71-.53 1.44-.854 2.143-.336.733-.818 1.43-1.109 2.171-.292.748-.47 1.526-.625 2.299-.248 1.241-.566 2.485-.623 3.733-.1 2.206-.027 4.417-.02 6.626 0 .228.023.459.079.682.36 1.435.72 2.87 1.106 4.301.273 1.011.589 2.017.889 3.024.014.048.063.089.088.135.348.64.72 1.272 1.032 1.922.31.646.474 1.337.853 1.957.507.83 1.177 1.604 1.742 2.416.58.834 1.038 1.72 1.692 2.516.7.852 1.706 1.57 2.323 2.448.778 1.106 2 1.907 3.021 2.84a33.438 33.438 0 0 0 3.804 3.005c1.772 1.197 3.674 2.287 5.537 3.408.777.468 1.57.925 2.404 1.332.817.399 1.68.745 2.547 1.082.624.241 1.297.41 1.929.643 1.237.455 2.445.954 3.693 1.391.739.258 1.53.428 2.295.643 1.002.28 1.982.613 3.005.834 1.202.26 2.44.428 3.665.625 1.864.302 3.72.804 5.597.852 5.858.148 11.735.35 17.55-.475 1.143-.163 2.275-.365 3.41-.551.062-.01.113-.054.175-.069 1.129-.278 2.258-.555 3.388-.831.847-.208 1.72-.369 2.535-.632 1.309-.423 2.577-.919 3.866-1.375.672-.238 1.415-.393 2.017-.704.822-.424 1.492-.47 2.25.063.613.43 1.32.784 1.965 1.19 1.739 1.095 3.452 2.212 5.206 3.292.697.43 1.461.8 2.218 1.17.787.384 1.609.73 2.405 1.103 1.308.613 2.572 1.287 3.923 1.84 1.46.598 2.795 1.375 4.459 1.7.768.15 1.444.551 2.192.78 1.253.387 2.533.724 3.8 1.087 1.097.314 2.181.654 3.288.947.806.215 1.647.354 2.456.563 1.028.266 2.012.692 3.065.827 1.819.233 3.568.6 5.321 1.019 1.176.282 2.44.366 3.67.507 1.485.17 2.971.336 4.464.448 2.707.203 5.416.407 8.131.53 1.952.087 3.919.112 5.87.04 3.763-.14 7.519-.367 11.277-.559.134-.007.267-.027.4-.046 2.04-.276 4.08-.551 6.118-.83 1.482-.205 2.963-.413 4.444-.624.097-.014.186-.058.282-.08 1.179-.273 2.36-.544 3.539-.815 1.21-.278 2.42-.554 3.628-.834.97-.226 1.938-.454 2.905-.687.783-.19 1.58-.356 2.339-.59.897-.274 1.754-.622 2.642-.915 1.091-.362 2.237-.64 3.286-1.06 1.873-.75 3.713-1.551 5.522-2.384 1.23-.567 2.298-1.388 3.605-1.786.954-.292 2.433-.392 3.227-.025 1.483.686 2.614 1.795 3.939 2.688a50.88 50.88 0 0 0 3.398 2.11c1.01.57 1.96 1.179 3.124 1.628 1.586.611 2.92 1.584 4.472 2.257 1.47.638 3.08 1.09 4.63 1.624.602.207 1.206.413 1.805.628.752.27 1.474.606 2.255.806.945.241 1.955.337 2.912.555 1.965.448 3.892.996 5.875 1.383 1.189.233 2.486.357 3.66.422 4.181.234 8.348.867 12.573.537.335-.026.676-.017 1.008-.057 2.275-.267 4.55-.538 6.823-.818 1.523-.188 3.044-.391 4.564-.59.064-.007.123-.04.186-.057 1.033-.282 2.053-.596 3.103-.836.986-.225 2.003-.372 3.006-.556.096-.017.187-.05.275-.083.793-.295 1.575-.607 2.378-.882 1.086-.374 2.225-.668 3.277-1.088 1.465-.585 2.876-1.248 4.299-1.89.982-.445 1.97-.885 2.911-1.378a97.785 97.785 0 0 0 3.755-2.088c1.2-.698 2.415-1.389 3.53-2.16 1.101-.762 2.118-1.599 3.113-2.443 1.244-1.057 2.48-2.124 3.622-3.244 1.002-.982 1.868-2.044 2.795-3.069.652-.72 1.347-1.42 1.953-2.16.684-.838 2.25-1.102 3.41-.595.996.435 2.05.801 3.103 1.16.77.26 1.584.448 2.366.69 1.353.418 2.668.915 4.052 1.26 1.14.284 2.357.393 3.539.581.164.027.323.073.487.103 1.585.288 3.154.72 4.761.827 2.142.144 4.314.036 6.473.036zM.202 119.772c.206-.44.507-.867.601-1.32.32-1.54.428-3.113.884-4.627.426-1.414 1.204-2.765 1.806-4.15.292-.673.48-1.374.814-2.035.403-.794.898-1.563 1.378-2.333.386-.62.79-1.235 1.222-1.837a34.728 34.728 0 0 1 1.564-2.05c.8-.955 1.608-1.912 2.493-2.824.771-.796 1.622-1.551 2.492-2.289 1.304-1.107 2.617-2.211 3.996-3.265 1.38-1.055 2.79-2.097 4.29-3.054 1.253-.798 2.61-1.518 4-2.177 1.87-.887 3.793-1.713 5.737-2.503 1.404-.57 2.897-1.014 4.32-1.561 1.688-.651 3.465-1.086 5.272-1.515 1.532-.364 3.072-.647 4.615-.956 2.836-.568 5.725-.717 8.578-1.085 2.839-.366 5.63-.3 8.436-.264 2.232.03 4.46.326 6.686.522.286.025.555.158.83.246.963.308 1.681-.088 1.895-.865.28-1.02.737-2.012 1.121-3.016.303-.79.594-1.584.924-2.368.168-.4.387-.792.625-1.172.608-.97 1.243-1.93 1.86-2.896.242-.38.433-.781.7-1.151.843-1.166 1.71-2.322 2.567-3.482.749-1.014 1.4-2.077 2.268-3.029 1.059-1.162 2.297-2.231 3.46-3.339.561-.536 1.097-1.088 1.697-1.599a58.602 58.602 0 0 1 2.85-2.303c1.231-.923 2.501-1.82 3.792-2.697.964-.655 1.984-1.264 2.985-1.888.811-.505 1.604-1.03 2.457-1.491.962-.522 1.802-1.138 2.959-1.506 1.155-.367 2.081-1.123 3.172-1.633 1.036-.484 2.156-.868 3.235-1.302 1.077-.434 2.143-.883 3.222-1.314.537-.214 1.073-.442 1.642-.597.822-.222 1.679-.366 2.508-.573.564-.141 1.106-.333 1.659-.499 1.505-.45 3.01-.9 4.517-1.348.061-.018.126-.033.192-.042 1.285-.193 2.58-.355 3.853-.582 1.496-.268 2.956-.662 4.465-.872 1.15-.16 2.378-.009 3.522-.18 5.673-.853 11.395-.381 17.083-.301 2.175.03 4.495.126 6.616.785.149.046.335.022.5.045 1.463.2 2.93.39 4.387.613.856.132 1.719.273 2.542.488 1.564.409 3.113.851 4.645 1.322.888.273 1.407.082 1.84-.611.783-1.254 1.668-2.472 2.492-3.712.472-.712.842-1.466 1.376-2.15 1.056-1.353 2.102-2.717 3.168-4.06.95-1.199 2.091-2.318 2.953-3.57.669-.974 1.752-1.79 2.674-2.661.844-.798 1.654-1.624 2.588-2.359a456.534 456.534 0 0 1 7.441-5.69 59.776 59.776 0 0 1 3.31-2.337c1.097-.715 2.182-1.478 3.426-2.018 1.655-.717 3.094-1.632 4.643-2.444.882-.462 1.912-.761 2.842-1.175 1.315-.587 2.568-1.255 3.907-1.806 1.106-.456 2.304-.784 3.452-1.183.756-.262 1.493-.555 2.246-.823.532-.19 1.063-.394 1.62-.534 1.556-.391 3.135-.731 4.685-1.135.868-.227 1.694-.544 2.541-.815.184-.059.377-.112.573-.143 1.26-.193 2.537-.344 3.784-.58 1.24-.236 2.453-.555 3.679-.836.063-.014.133-.014.2-.02 2.33-.205 4.663-.39 6.986-.627.912-.093 1.803-.304 2.704-.462h11.747c.936.156 1.865.363 2.813.457 2.457.24 4.933.374 7.38.664 1.197.141 2.329.57 3.512.804 1.148.227 2.345.32 3.485.567 1.04.225 2.032.576 3.045.872.123.036.247.072.372.103 1.55.369 3.12.693 4.642 1.117 1.545.43 3.081.899 4.549 1.458 1.937.74 3.804 1.583 5.7 2.382 1.212.51 2.475.964 3.619 1.548 1.745.892 3.419 1.865 5.1 2.824 1.838 1.049 3.683 2.09 5.461 3.194 1.06.658 2.01 1.416 2.982 2.15 1.445 1.091 2.9 2.178 4.286 3.311 1.059.864 2.034 1.787 3.02 2.7.995.92 1.977 1.85 2.925 2.797.796.795 1.543 1.619 2.298 2.437.655.713 1.324 1.422 1.927 2.16.549.672 1.011 1.384 1.524 2.072.838 1.127 1.717 2.237 2.515 3.379.334.478.486 1.026.767 1.529.217.386.51.748.761 1.125.386.578.8 1.147 1.134 1.742.306.541.51 1.114.781 1.667.338.694.695 1.383 1.05 2.071.27.52.604 1.025.808 1.557.342.892.564 1.81.907 2.7.329.855.748 1.69 1.124 2.533.032.071.034.15.055.223.196.692.425 1.38.585 2.076.303 1.308.606 2.617.833 3.934.143.843.418 1.036 1.51 1.186 1.82.25 3.617.591 5.422.892 1.184.198 2.384.349 3.545.602.956.207 1.863.542 2.8.803.82.229 1.67.405 2.477.658.773.241 1.507.558 2.265.83.565.205 1.164.36 1.707.592 1.451.621 2.888 1.263 4.319 1.914 1.153.526 2.345 1.02 3.417 1.63 1.553.885 3.027 1.85 4.51 2.804 1.094.703 2.193 1.407 3.213 2.169 1.16.866 2.241 1.794 3.346 2.702.535.44 1.09.872 1.555 1.352.873.901 1.673 1.842 2.53 2.753.716.765 1.485 1.501 2.2 2.266.364.388.679.804.973 1.223.326.462.592.946.906 1.413.627.935 1.27 1.865 1.907 2.797.599.875 1.29 1.722 1.774 2.631.595 1.117 1.005 2.288 1.516 3.43.357.798.748 1.588 1.122 2.381.023.047.054.094.066.142.285 1.072.535 2.148.86 3.212.334 1.105.74 2.197 1.115 3.295.016.048.02.1.028.15.264 1.705.675 3.405.757 5.114.13 2.713.139 5.436.009 8.149-.091 1.915-.318 3.85-.841 5.718-.232.832-.333 1.667-.562 2.489-.259.932-.722 1.833-1.09 2.749-.067.17-.083.351-.153.52-.411.983-.836 1.964-1.245 2.948-.235.566-.402 1.151-.685 1.703-.392.77-.887 1.51-1.296 2.274-.282.53-.466 1.09-.747 1.621-.254.48-.56.947-.878 1.405-.846 1.22-1.637 2.468-2.59 3.64-.94 1.158-2.051 2.236-3.089 3.349-.904.97-1.762 1.969-2.731 2.9A32.21 32.21 0 0 1 374 149.21c-1.348 1.019-2.77 1.985-4.196 2.943-1.918 1.287-3.795 2.618-5.832 3.79-1.459.841-3.14 1.465-4.74 2.163-1.483.644-2.968 1.288-4.493 1.873-.742.283-1.586.413-2.364.648-.797.24-1.557.548-2.356.783-.826.244-1.676.442-2.52.65-.596.146-1.19.307-1.802.405-1.354.218-2.711.447-4.083.587-2.964.303-5.936.574-8.911.81-.82.064-1.664-.037-2.496-.074-1.615-.072-3.234-.116-4.84-.24-1.807-.139-3.617-.295-5.398-.553-1.626-.236-3.229-.581-4.813-.95-.855-.2-1.637-.57-2.472-.824-.683-.21-1.407-.346-2.095-.55-1.092-.323-2.167-.676-3.252-1.015-.815-.254-1.263-.04-1.742.565-.63.796-1.369 1.547-2.122 2.282-.786.768-1.594 1.53-2.482 2.232a202.524 202.524 0 0 1-5.086 3.856c-1.201.89-2.395 1.79-3.684 2.604-1.761 1.113-3.554 2.208-5.438 3.199-1.25.656-2.694 1.102-4.031 1.67-1.355.574-2.647 1.235-4.034 1.758-1.26.476-2.613.81-3.916 1.224-.85.27-1.672.59-2.524.852-.64.197-1.303.358-1.97.5-1.074.229-2.164.417-3.24.644-1.209.253-2.41.53-3.615.796-.161.036-.323.07-.488.092-1.384.176-2.76.43-4.153.505-4.388.236-8.758.81-13.18.504-2.168-.149-4.33-.341-6.49-.548-1.19-.114-2.383-.251-3.547-.463-1.219-.222-2.4-.557-3.603-.826-.79-.175-1.594-.318-2.391-.48-1.05-.213-2.124-.374-3.139-.659-1.404-.395-2.757-.89-4.137-1.33-.72-.23-1.474-.405-2.175-.663-1.05-.387-2.056-.839-3.1-1.235-.766-.291-1.603-.487-2.338-.814-.953-.424-1.844-.929-2.747-1.414-.828-.445-1.643-.905-2.452-1.37-1.051-.602-2.122-1.187-3.127-1.83-1.352-.866-2.627-1.8-3.993-2.653-.202-.127-.782-.05-1.085.074-1.033.423-2.014.915-3.025 1.369-.806.362-1.609.73-2.443 1.052-1.234.477-2.5.906-3.742 1.372-.752.281-1.464.625-2.23.881-.749.25-1.546.421-2.32.632-.636.172-1.275.339-1.9.531-.875.268-1.729.574-2.607.836-.685.204-1.381.4-2.092.542-1.102.222-2.227.374-3.329.595-1.111.224-2.206.493-3.306.747-.16.037-.305.127-.465.146-1.633.197-3.272.365-4.9.58-1.782.236-3.553.512-5.33.772-.23.034-.459.095-.69.108-6.448.368-12.893.849-19.37.54-2.647-.128-5.288-.33-7.926-.54-1.46-.115-2.944-.218-4.356-.497-2.131-.422-4.285-.687-6.453-.954-1.687-.207-3.324-.652-4.977-1.012-1.36-.296-2.727-.58-4.055-.946-1.495-.413-2.945-.92-4.422-1.372-1.152-.353-2.328-.665-3.473-1.033a78.627 78.627 0 0 1-3.676-1.267 47.508 47.508 0 0 1-3.063-1.282c-1.312-.6-2.537-1.323-3.906-1.83-.774-.287-1.474-.571-2.128-1.003-.705-.466-1.602-.76-2.357-1.188a285.47 285.47 0 0 1-5.182-3.028c-.41-.244-.766-.538-1.116-.788-1.334.453-2.656.922-4.001 1.351-1.06.34-2.141.642-3.225.938-.636.173-1.288.322-1.944.447-1.25.238-2.507.458-3.765.674-1.646.283-3.296.56-4.947.83-.294.049-.6.069-.903.077-2.09.063-4.187.067-6.271.188-3.432.2-6.835-.162-10.252-.236-1.272-.028-2.552-.243-3.8-.463-1.678-.295-3.337-.66-4.989-1.031-1.26-.284-2.52-.58-3.736-.954-1.329-.409-2.604-.917-3.908-1.373-.514-.18-1.054-.32-1.56-.51-1.797-.675-3.666-1.266-5.351-2.075-1.77-.85-3.361-1.91-5.028-2.88-1.185-.69-2.435-1.329-3.532-2.09-1.54-1.071-2.989-2.22-4.433-3.366-1.075-.851-2.146-1.714-3.097-2.643-.835-.816-1.498-1.731-2.24-2.6-.82-.961-1.66-1.913-2.457-2.884-.29-.354-.506-.745-.717-1.132-.51-.937-.985-1.884-1.498-2.82-.577-1.055-1.241-2.086-1.75-3.16-.38-.798-.585-1.644-.846-2.473-.356-1.121-.718-2.242-1.024-3.371-.174-.64-.205-1.303-.367-1.946-.166-.655-.414-1.3-.625-1.95v-7.466z" fill="#231F20"/><path d="M331.262 159.527c-2.159 0-4.331.108-6.473-.036-1.607-.108-3.176-.539-4.761-.827-.164-.03-.323-.076-.487-.103-1.182-.188-2.398-.297-3.54-.58-1.383-.346-2.698-.843-4.05-1.261-.783-.242-1.597-.43-2.367-.69-1.052-.359-2.107-.725-3.103-1.16-1.16-.507-2.726-.243-3.41.595-.606.74-1.3 1.44-1.953 2.16-.927 1.025-1.793 2.087-2.795 3.069-1.142 1.12-2.378 2.187-3.622 3.244-.995.844-2.012 1.68-3.114 2.443-1.114.771-2.329 1.462-3.529 2.16a97.785 97.785 0 0 1-3.755 2.088c-.94.493-1.93.933-2.911 1.377-1.423.643-2.834 1.306-4.3 1.891-1.051.42-2.19.714-3.276 1.088-.803.275-1.585.587-2.378.882a1.564 1.564 0 0 1-.275.083c-1.003.184-2.02.331-3.006.556-1.05.24-2.07.554-3.103.836-.063.017-.122.05-.186.057-1.52.199-3.041.402-4.564.59-2.273.28-4.548.551-6.823.818-.332.04-.673.031-1.008.057-4.225.33-8.392-.303-12.573-.537-1.174-.065-2.471-.19-3.66-.422-1.983-.387-3.91-.935-5.875-1.383-.957-.218-1.967-.314-2.912-.555-.781-.2-1.503-.537-2.255-.806-.599-.215-1.203-.42-1.806-.628-1.549-.534-3.16-.986-4.63-1.624-1.551-.673-2.885-1.646-4.47-2.257-1.165-.449-2.116-1.058-3.125-1.629a50.88 50.88 0 0 1-3.398-2.11c-1.325-.892-2.456-2-3.94-2.687-.793-.367-2.272-.267-3.226.025-1.307.398-2.374 1.22-3.605 1.786-1.809.833-3.65 1.634-5.522 2.384-1.049.42-2.195.698-3.286 1.06-.888.293-1.745.64-2.642.916-.76.233-1.556.4-2.339.589-.967.233-1.935.46-2.905.687-1.208.28-2.419.556-3.628.834-1.18.27-2.36.542-3.54.815-.095.022-.184.066-.281.08-1.481.21-2.962.42-4.444.623-2.039.28-4.079.555-6.118.831-.133.019-.266.04-.4.046-3.758.192-7.514.42-11.276.559a72.128 72.128 0 0 1-5.871-.04c-2.715-.123-5.424-.327-8.13-.53a114.995 114.995 0 0 1-4.464-.448c-1.231-.14-2.495-.225-3.671-.507-1.753-.42-3.502-.786-5.32-1.019-1.054-.135-2.038-.56-3.066-.827-.809-.209-1.65-.348-2.456-.563-1.107-.293-2.19-.633-3.288-.947-1.267-.363-2.547-.7-3.8-1.086-.748-.23-1.424-.63-2.192-.78-1.664-.326-3-1.103-4.46-1.701-1.35-.553-2.614-1.227-3.922-1.84-.796-.373-1.618-.719-2.405-1.103-.757-.37-1.521-.74-2.218-1.17-1.754-1.08-3.467-2.197-5.206-3.291-.645-.407-1.352-.76-1.966-1.191-.757-.533-1.427-.487-2.249-.063-.602.31-1.345.466-2.017.704-1.289.456-2.557.952-3.866 1.375-.815.263-1.688.424-2.535.632-1.13.276-2.26.553-3.388.831-.062.015-.113.058-.174.069-1.136.186-2.268.388-3.41.55-5.816.827-11.693.624-17.55.476-1.877-.048-3.734-.55-5.598-.852-1.225-.197-2.463-.366-3.665-.625-1.023-.22-2.003-.554-3.005-.834-.765-.215-1.556-.385-2.295-.643-1.248-.437-2.456-.936-3.693-1.391-.632-.233-1.305-.402-1.929-.643-.866-.337-1.73-.683-2.547-1.082a31.156 31.156 0 0 1-2.404-1.332c-1.863-1.12-3.765-2.211-5.537-3.408a33.438 33.438 0 0 1-3.804-3.005c-1.02-.933-2.243-1.734-3.02-2.84-.618-.878-1.624-1.596-2.324-2.448-.654-.796-1.113-1.682-1.692-2.516-.565-.812-1.235-1.586-1.742-2.416-.379-.62-.542-1.311-.853-1.957-.311-.65-.684-1.282-1.032-1.922-.025-.046-.074-.087-.088-.135-.3-1.007-.616-2.013-.89-3.024-.386-1.43-.745-2.866-1.105-4.301a2.861 2.861 0 0 1-.08-.682c-.006-2.21-.079-4.42.02-6.626.058-1.248.376-2.492.624-3.733.155-.773.333-1.551.625-2.299.29-.741.773-1.438 1.11-2.17.323-.704.55-1.433.853-2.144.23-.541.464-1.085.776-1.602.589-.978 1.187-1.956 1.87-2.896.559-.77 1.258-1.48 1.874-2.226.74-.897 1.427-1.82 2.2-2.7.344-.392.86-.696 1.269-1.057 1.355-1.196 2.625-2.45 4.066-3.583 1.208-.95 2.57-1.795 3.935-2.62 1.19-.721 2.471-1.358 3.724-2.017 1.485-.78 2.948-1.588 4.489-2.3.933-.431 2-.7 3.002-1.048.874-.301 1.74-.616 2.615-.915.573-.196 1.137-.422 1.738-.549 1.889-.397 3.794-.748 5.69-1.127 1.4-.28 2.78-.632 4.197-.849.982-.149 2.043-.024 3.016-.193 3.3-.572 6.635-.433 9.958-.337 2.038.057 4.078.268 6.092.525 1.249.16 2.46.508 3.667.82.914.236 2.935-.728 3.098-1.451.232-1.037.767-2.035 1.132-3.056.301-.842.494-1.706.828-2.538.28-.694.702-1.355 1.049-2.034.28-.55.542-1.105.816-1.657.48-.964.886-1.953 1.468-2.88.514-.817 1.48-1.51 1.793-2.353.443-1.2 1.688-1.999 2.285-3.114.433-.808 1.272-1.505 1.995-2.215a54.716 54.716 0 0 1 2.511-2.283A282.72 282.72 0 0 1 94.443 58c.98-.815 1.96-1.637 3.028-2.384.88-.616 1.897-1.12 2.844-1.683 1.284-.765 2.531-1.567 3.849-2.298.81-.449 1.728-.787 2.587-1.187.89-.414 1.749-.867 2.657-1.26.976-.42 1.986-.8 2.994-1.179 1.208-.454 2.417-.911 3.65-1.325.783-.263 1.609-.455 2.42-.67.655-.174 1.314-.34 1.978-.5 1.452-.35 2.9-.716 4.365-1.035 2.155-.47 4.323-.904 6.486-1.352.032-.007.065-.016.098-.02 2.037-.194 4.07-.52 6.113-.557 4.486-.084 8.983-.112 13.464.02 2.189.063 4.355.535 6.531.824.2.026.395.065.594.093 1.39.19 2.8.321 4.167.58 1.577.299 3.125.691 4.672 1.075 1.122.278 2.224.6 3.328.916.625.178 1.23.392 1.854.573 1.278.37 2.408.148 3.123-.777.577-.748.906-1.603 1.37-2.403.312-.538.671-1.062 1-1.594.338-.547.65-1.103 1-1.645.558-.863 1.131-1.722 1.715-2.576.496-.725 1.017-1.442 1.53-2.161.274-.386.513-.79.839-1.15 1-1.106 2.043-2.193 3.053-3.295.255-.279.407-.613.678-.881 1.236-1.229 2.45-2.473 3.763-3.654 1.627-1.464 3.285-2.914 5.04-4.291 1.386-1.086 2.97-2.026 4.407-3.076 2.082-1.521 4.409-2.801 6.791-4.033 1.492-.772 2.922-1.615 4.447-2.345 1.498-.717 3.06-1.362 4.634-1.982 1.095-.43 2.257-.763 3.387-1.143 1.877-.632 3.737-1.295 5.637-1.886.87-.27 1.824-.383 2.727-.6 1.1-.263 2.18-.578 3.281-.838.94-.221 1.886-.451 2.852-.579 1.757-.232 3.623-.197 5.27-.638 1.558-.417 3.114-.168 4.606-.44 4.167-.762 8.383-.33 12.574-.359 2.262-.015 4.585.129 6.773.532 1.279.237 2.542.236 3.789.422 1.308.196 2.576.54 3.861.823.128.027.25.073.377.102 1.419.312 2.836.627 4.258.93.964.206 1.955.35 2.895.605.902.243 1.742.615 2.632.889.724.222 1.506.342 2.22.579a56.59 56.59 0 0 1 3.093 1.148c.58.23 1.113.523 1.681.772 1.495.655 3.005 1.292 4.495 1.955 1.583.705 3.2 1.377 4.707 2.166 1.305.682 2.478 1.51 3.71 2.272 1.433.885 2.884 1.755 4.293 2.66a29.287 29.287 0 0 1 2.282 1.636c1.222.963 2.447 1.926 3.59 2.942 1.323 1.176 2.556 2.409 3.83 3.615 1.006.95 2.054 1.876 3.008 2.855.606.622 1.071 1.321 1.603 1.985.506.633 1.032 1.257 1.52 1.897.418.55.8 1.114 1.19 1.676.507.733 1.008 1.47 1.506 2.206.384.566.758 1.136 1.14 1.703.326.486.671.964.979 1.456.341.549.684 1.1.968 1.666.647 1.287 1.292 2.576 1.871 3.882.339.759.54 1.552.821 2.327.265.725.566 1.443.828 2.169.2.551.353 1.113.542 1.666.376 1.097.764 2.193 1.145 3.288.025.074.039.15.052.225.228 1.37.478 2.738.676 4.111.131.917.616 1.133 1.664 1.565 1.347.555 2.731.265 4.071.458 1.75.252 3.476.596 5.214.899.164.028.332.047.5.055 1.455.067 2.751.484 4.05.952.793.287 1.71.37 2.535.617.73.218 1.399.548 2.107.808.578.212 1.181.382 1.76.591 2.216.8 4.36 1.679 6.295 2.847 1.102.665 2.411 1.132 3.548 1.77.818.459 1.519 1.04 2.245 1.586 1.214.913 2.402 1.845 3.609 2.763 1.142.869 2.283 1.724 3.155 2.781.666.806 1.612 1.478 2.377 2.242a18.586 18.586 0 0 1 1.536 1.77c.907 1.167 1.817 2.336 2.646 3.536.76 1.1 1.459 2.226 2.1 3.367.704 1.252 1.285 2.543 1.966 3.802.573 1.064.973 2.155 1.347 3.27.488 1.447.905 2.916 1.454 4.334.498 1.284.177 2.553.555 3.776 1.116 3.604.382 7.244.463 10.864.034 1.533-.365 3.076-.635 4.608a12.758 12.758 0 0 1-.659 2.322c-.32.84-.757 1.655-1.14 2.483-.043.094-.06.197-.095.295-.491 1.373-.949 2.754-1.49 4.116-.345.87-.745 1.735-1.248 2.558-.514.842-1.203 1.622-1.776 2.444-.543.781-.955 1.62-1.568 2.367-.815.994-1.297 2.118-2.45 2.993-.916.694-1.436 1.673-2.227 2.472-.947.96-1.973 1.876-3.006 2.784-.93.818-1.856 1.65-2.894 2.387-1.57 1.116-3.214 2.176-4.871 3.219a63.867 63.867 0 0 1-3.92 2.282c-.796.425-1.709.725-2.555 1.099-.699.308-1.367.655-2.07.96-.456.196-.94.366-1.429.513-1.288.386-2.584.758-3.882 1.127-1.576.447-3.136.934-4.744 1.309-1.195.28-2.474.35-3.678.611-2.946.64-5.968.491-8.97.58-.268.008-.539.001-.809.001v-.1z" fill="#FEFEFE"/>
  </g>
</svg>

Мы получим:

Сейчас облако кажется слишком белым, но на фоне голубого неба будет выглядеть отлично.

Анимировать это довольно просто. Все, что нам нужно сделать, это изменить значение min-x в атрибуте viewBox.

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

JavaScript анимации выглядит так:

// ссылка на SVG
const cloudSVG = document.querySelector('#cloudSVG');

// анимируем наш SVG, где 30 - это время, а 700 - значение x 
TweenMax.to(cloudSVG, 30, { attr: { viewBox: "700 0 275 325" }});

Вышеприведенный код дает атрибуту viewBox команду изменить значение x до 700 в течение установленного времени (30 секунд). Благодаря этому наше облако сможет медленно перемещаться справа налево.

Изучить код подробнее можно здесь.

Заключение

Атрибут preserveAspectRatio тоже очень полезен, но мы намеренно не упоминали его в этом материале, так как это было бы слишком много для одного руководства. Рекомендуем сначала разобраться с основами viewBox и перейти к preserveAspectRatio, если захотите продолжить изучение атрибутов.

Читайте также: Как работает SVG-атрибут preserveAspectRatio