SVG size

by jeum

HTML

<div id="container">
    <svg version="1.1" class="svgIcon" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -5 16 16">
        <polygon points="8,3 5,3 5,0 0,0 0,10 8,10 "/>
        <polygon points="8,3 5,0 5,3 "/>
    </svg>
    VTK
</div>

CSS

#container {
    width: 48px;
    height: 78px;
    
    /* Rappel : les styles SVG peuvent être placés dans le container ou dans le svg */
    stroke: #EEE;              /* SVG: couleur tracés */

    text-align: center;
    color: #EEE;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #222;
}
.svgIcon {
    stroke-width : 0.8px;      /* SVG: épaisseur de ligne (avant scale) */
    stroke-linejoin: round;    /* SVG: type de jointure */
    fill: none;                /* SVG: couleur de remplissage */
}

JavaScript

// Le SVG est rescalé en fonction de ses attributs width/height ou de la taille de son container :
// - attributs width/height le plus défavorable si présent
// - width du container sinon
// L'attribut viewBox défini le cadrage avant le scale (the first two coordinates are the upper-left corner if you're cropping the image, and the second two coordinates are the width and height before scaling)