Tutorial

Understand the SVG Viewbox

Published on June 28, 2019
    Default avatar

    By Paul Ryan

    Understand the SVG Viewbox

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    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:

    Bird Picture

    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!

    Comparison Between Containers

    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.

    Part of bird hidden

    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.

    Values of viewBox

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

    Bird in a box

    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:

    Bird Zoomed in

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

    Viewport and Viewbox

    You can think of the viewport as the window to our image and the viewBox as the tool we use to scale and position the image.

    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:

    Half of the bird

    To give a clearer visual representation:

    Viewport and Viewbox

    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:

    Cloud

    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:

    Cloud Animation

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Paul Ryan

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel