размеры

 

<svg
        class="<?=$arParams['DIAGRAM_ID']?>"
        viewbox="0 0 <?=$arParams['WIDTH']?> <?=$arParams['HEIGHT']?>"
        width="<?=$arParams['WIDTH']?>"
        height="<?=$arParams['HEIGHT']?>"
         style="width: 100%"
></svg>

http://css.yoksel.ru/svg-sizes/

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

 

<svg class="svg svg--nosizes" viewBox="0 0 180 180" width="493" height="200">
        <circle r="50" cx="50" cy="50" fill="hsla(5, 100%,50%,.5)"></circle>
        <circle r="50" cx="130" cy="50" fill="hsla(50, 100%,50%,.5)"></circle>
        <circle r="50" cx="50" cy="130" fill="hsla(90, 100%,50%,.5)"></circle>
        <circle r="50" cx="130" cy="130" fill="hsla(200, 100%,50%,.5)"></circle>
        
        <rect width="100%" height="100%" fill="none" stroke="teal"></rect>
    </svg>

 

 

 

    len =data.length ;
    size = ( +prop.barSize + +prop.spaceBetween) * len ;
    x = d3.scaleLinear()
        .domain([0, len])
        .range([+prop.gistPadding , size ])
    ;

    if (  size > widthSvg ) {
        sizeSvg = +prop.paddingLeft + size  +30;
        svg.attr("width" , sizeSvg  );
        d3.select('#someId').attr('viewBox' , "0 0 "+ sizeSvg + " 400") ;
    }

 

 

 

<svg class="<?=$arParams['DIAGRAM_ID']?>" viewbox="0 0 <?=$arParams['WIDTH']?> <?=$arParams['HEIGHT']?>" width="<?=$arParams['WIDTH']?>" 
height="<?=$arParams['HEIGHT']?>" id="svg_graf"></svg>