CODEWITHSUNDEEP
svg
user2522885
user2522885

Reputation: 615

SVG -- Why does no viewBox clip IMG display?

Im trying to better understand SVG and its viewBox and the IMG tag.

I'm loading in an IMG which happens to be an SVG file. The following CodePen sample shows 2 IMG svg files. The first is an SVG with no viewBox attribute and the second is the same image but with the vieweBox attribute set to viewBox="0 0 68 248".

I understand why the second IMG is showing in full as it does. What i dont understand is why the first IMG is deciding to show itself as clipped at a 300x150 pixel size. It seems such a specific size yet i see no reason for that choice.

Any explainations? 

CodePen: [https://codepen.io/anon/pen/WXMKVp][1]

For the record here is the first IMG svg code...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <style>
        #Glass_Fluid_Reflection
        {
            fill:#E77C62;
        }

        #Fluid
        {
            fill:#DF543D;
        }
    </style>

    <path id="Fluid"
    d="M49.2,198.7c-2.2-2.1-4.6-3.6-7.3-4.5V21.3H26.3v172.8c-2.7,1-5.1,2.5-7.2,4.5
    c-4.2,4-6.2,8.7-6.2,14.3c0,5.6,2,10.3,6.2,14.3c4.1,3.9,9.1,5.9,15.1,5.9c5.9,0,10.9-2,15-5.9c4.2-4,6.2-8.7,6.2-14.3
    C55.4,207.4,53.4,202.7,49.2,198.7z"/>

    <path id="Glass_Fluid_Reflection"
    d="M42.4,200.7c-1.5-2.3-3.9-3.5-7.3-3.7c-0.3-0.1-0.7-0.1-1,0V30.8
    c0-0.6-0.2-1.1-0.7-1.5s-1-0.7-1.7-0.7c-0.6,0-1.3,0.3-1.7,0.7c-0.4,0.4-0.7,0.9-0.7,1.5v167c-1.4,0.4-2.9,1-4.3,1.9
    c-3.3,2-5.6,4.4-6.9,7.4c-1.2,2.9-1.2,5.5,0.3,7.8c1.4,2.1,3.4,2.6,6.2,1.7c1.5-0.5,4.5-1.9,8.8-4.5c4.3-2.5,7-4.3,8.2-5.4
    C43.5,204.6,43.8,202.7,42.4,200.7z"/>
</svg>

Upvotes: 0

Views: 49

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

300 x 150 is the browser telling you you've not provided valid sizing information so it cannot calculate a valid width or a valid height. If it defaulted to 0x0 you might think that was because the image itself was invalid.

Upvotes: 1

Related Questions