DONT ADD ANYTHING HERE!

viewBox
  1. The viewBox attribute defines the position and dimension, in user space, of an SVG viewport
  2. The value of the viewBox attribute is a list of four numbers separated by whitespace and/or a comma
    1. min-x
    2. min-y
    3. width
    4. height
  3. min-x and min-y represent the smallest X and Y coordinates that the viewBox may have
  4. That is, (x-min, y-min) are the origin coordinates of the viewBox
  5. The width and height specify the viewBox size
  6. The resulting viewBox is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the browser viewport)

Example

No viewBox

Example

viewBox= "0 0 100 100"

Example

viewBox="150 0 300 200"

Example

viewBox= "-150 -100 300 200"

Code (Example 1)

Note

  1. The code for all examples is the same, with the exception of the viewBox attribute value
  2. The viewBox attribute is missing completely from example 1

HTML

    <div class="flex_container">
        
        <object data="../svg/svg_example_six_1.svg"
                type="image/svg+xml">
        </object>

    </div>

SVG

    // svg_example_six_1.svg                            

    <svg version= "1.1" 

        width = "300"
        height = "200"
        xmlns = "http://www.w3.org/2000/svg">

        <rect  
                width="100%" 
                height="100%" 
                fill="lightgoldenrodyellow" />
        <rect  
                x="5%" 
                y="5%" 
                width="40%" 
                height="40%" 
                fill="red" />
        
        <rect  
                x="55%" 
                y="55%" 
                width="40%" 
                height="40%" 
                fill="blue" />
        
        <rect  
                x="55%" 
                y="5%" 
                width="40%" 
                height="40%" 
                fill="green" />
    
        <rect  
                x="5%" 
                y="55%" 
                width="40%" 
                height="40%" 
                fill="orange" />

    </svg>

References

MDN: viewbox