Understand the SVG Viewbox

The SVG viewBox can be a source of frustration when starting on your journey of learning SVG, I know it was for me!

With alien-like syntax such as viewBox="0 0 50 50", it’s no surprise that many of us face problems understanding the viewBox!

I hope this article will clear up any confusion you have, and put you in a position to use the power of the viewBox.

Why viewBox?

Why even bother to use a viewBox? You can create perfectly valid SVGs without specifying a viewBox, but you’d be depriving yourself of the many possibilities that the viewBox offers you.

The viewBox gives us the power to make our SVGs fill whatever container they are in, let’s say we have a little bird image like so:

With a viewBox correctly set on this image, it will scale to the dimensions of it’s container and since it’s an SVG it will look just as crisp!

As you can see from the above, our bird scales to whatever size the container is!

The viewBox also helps us hide part of an image which can be very useful for animations.

You can see from the above how powerful the viewBox can be, now it’s time to define it!

Defining the viewBox

The viewBox has four values, separated by either whitespace or commas.

Let’s give the above values more detail:

• x - specify the minimum x coordinate
• y - specify the minimum y coordinate
• width - width in user coordinates/px units
• height - height in user coordinates/px units

Ok that’s enough theory and gives us a foundation to work off, now let’s start writing some code!

Talk is cheap, show me the code!

First let’s examine the code for our bird 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;
}

So in our code above, we have the SVG wrapped in a div with the class name bird-cage, the SVG will scale to dimensions of this div.

Our viewBox has the values 0 0 100 100, 100 100 shows our entire image and scales to our container (bird-cage).

The bird-cage dimensions is what we call our viewport, essentially what we see - in the above example our viewBox fits perfectly.

If we wanted to zoom in on our bird, how exactly would we do this? We would need to make our viewBox bigger in the viewport, so let’s update our viewBox to 0 0 75 75

Now we have this:

Above is how it looks in the browser, really what is happening is this:

The viewBox is a very useful tool to crop our images. The easiest way to crop the image is by using the min x and y coordinates. If we wanted to only show the right half of the bird we can change the viewBox to be: viewBox="50 0 100 100" .

This will give us the following:

To give a clearer visual representation:

You can check out the code for the above here.

Creating an Animation

To get an even better understanding of the viewBox, we’ll use it to help us make an animation of a cloud moving across the sky.

The first thing we need to do is create our cloud SVG, here’s the code:

<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>

Visually:

Don’t worry about it looking very white, it will look much clearer with a sky behind it.

Now to animate this is quite easy, all we need to do is change the min-x value of the viewBox.

To achieve this I will use Greensock which is a great animation library, it’s beyond the scope of this article to get into how it works but if you want an article on it then let us know on Twitter.

Our JavaScript looks like this:

// get a reference to our entire SVG
const cloudSVG = document.querySelector('#cloudSVG');

// animate using a time of 30 seconds our SVG and move the x value to 700
TweenMax.to(cloudSVG, 30, { attr: { viewBox: "700 0 275 325" }});

As you can see we are instructing our viewBox to change it’s x value to 700 and we have set a time for this of 30 seconds. This gives us the following:

You can check this out here.

Conclusion

I have left preserveAspectRatio out of this article as it can be overwhelming while also getting to grips with the viewBox. When you feel comfortable with the basics of the viewBox then you should go on to advance your knowledge by learning about preserveAspectRatio, if you would like me to write about it then again let us know via Twitter.

I hope I have helped you understand the viewBox, now go ahead and make some cool stuff!

Thanks for taking the time to read this article.