Icon (svg document) not scalling properly (?) according to Css styles when applying height and width-CodePudding

I am dealing with a strange icon behaviour.

When i try to wrapp svg document in div tag, giving some width and height styles (e.x. 35x35) icon is very small. Actually, width and height are applied to svg tag, but the real image is wrapped in "path" tag, and it is very small (4x4 pixels).

In order to view Icon in some reasonable dimensions, I must give some pretty huge values, 195x195px according to icon viewbox. But in that way i have a huge DIV container with smaller icon.

I dont have much expierience with graphics and icons, so please tell me: is this Icon code is wrong, or I am wrongly appliyng styles ?

Moreover: how Can I wrapp it in Div in order to have Svg container displayed in 35x35 along with image ?

Heres the code. You can see that Svg container is bigger than the path containing image, but changing his values gives nothing apart from even smaller, not visible icon.

<svg width='195' height='195' viewBox='0 0 195 195' fill='none' xmlns='http://www.w3.org/2000/svg'>
  <g clip-path='url(#clip0_1970_18261)' filter='url(#filter0_d_1970_18261)'>
    <path
      d='M114.116 75.9624L99.0451 60.8921C98.1778 60.0242 96.7701 60.0242 95.9014 60.8921L92.7722 64.0219L96.742 67.9917C97.6648 67.6802 98.7225 67.8891 99.4577 68.6244C100.197 69.3643 100.404 70.431 100.085 71.3569L103.911 75.1831C104.837 74.864 105.905 75.0701 106.644 75.8106C107.677 76.8434 107.677 78.5176 106.644 79.551C105.61 80.5845 103.936 80.5845 102.902 79.551C102.125 78.7733 101.933 77.6317 102.327 76.6741L98.7588 73.1063L98.7583 82.4964C99.0104 82.6208 99.248 82.7871 99.458 82.9963C100.491 84.029 100.491 85.7028 99.458 86.7377C98.4247 87.7705 96.7499 87.7705 95.7177 86.7377C94.6846 85.703 94.6846 84.0293 95.7177 82.9963C95.9731 82.7411 96.2684 82.5484 96.5836 82.4193V72.9422C96.2684 72.8132 95.9736 72.6218 95.7177 72.365C94.9351 71.583 94.7467 70.4345 95.1481 69.4731L91.2344 65.5594L80.9006 75.8926C80.0325 76.7613 80.0325 78.169 80.9006 79.0372L95.9717 94.1074C96.8396 94.9753 98.2467 94.9753 99.1159 94.1074L114.116 79.1072C114.984 78.2387 114.984 76.8303 114.116 75.9624V75.9624Z'
      fill='#222426'
    />
  </g>
  <defs>
    <filter
      id='filter0_d_1970_18261'
      x='0.00830078'
      y='0'
      width='195'
      height='195'
      filterUnits='userSpaceOnUse'
      color-interpolation-filters='sRGB'
    >
      <feFlood flood-opacity='0' result='BackgroundImageFix' />
      <feColorMatrix
        in='SourceAlpha'
        type='matrix'
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
        result='hardAlpha'
      />
      <feOffset dy='20' />
      <feGaussianBlur stdDeviation='40' />
      <feColorMatrix
        type='matrix'
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'
      />
      <feBlend
        mode='normal'
        in2='BackgroundImageFix'
        result='effect1_dropShadow_1970_18261'
      />
      <feBlend
        mode='normal'
        in='SourceGraphic'
        in2='effect1_dropShadow_1970_18261'
        result='shape'
      />
    </filter>
    <clipPath id='clip0_1970_18261'>
      <rect
        width='35'
        height='35'
        fill='white'
        transform='translate(80.0083 60)'
      />
    </clipPath>
  </defs>
</svg>

CodePudding user response：

TL;DR. `viewBox` defines the container. `path` draws graphics inside.

It's the fundamental structure of svg format. viewBox is like a window through which you view the drawings inside the overall svg.

In your case, you have a huge viewBox that captures everything from 0,0 to 195,195 while your actual drawing inside is only a small part of it.

As the commenter said, you could either adjust the viewBox to only target the drawing area, or increase the drawing itself.

See the code snippet I attached here. In this example, I removed all filter and clipPath as they seem unnecessary, as well as the height and width of the SVG which can be better controlled by CSS. Try clicking the buttons to resize the graphic.

function handleResize(e) {
  const size = e.target.dataset.size;
  icon.setAttribute("height", size);
  icon.setAttribute("width", size);
}
const icon = document.querySelector('svg#icon');

document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', handleResize));

<button data-size="195">195px</button>
<button data-size="64">64px</button>
<button data-size="32">32px</button>

<svg
  viewBox='0 0 195 195'
  fill='none'
  xmlns='http://www.w3.org/2000/svg'
  id="icon"
>
  <g style="transform: scale(5.6) translateY(20px); transform-origin: center;">
    <path
      d='M114.116 75.9624L99.0451 60.8921C98.1778 60.0242 96.7701 60.0242 95.9014 60.8921L92.7722 64.0219L96.742 67.9917C97.6648 67.6802 98.7225 67.8891 99.4577 68.6244C100.197 69.3643 100.404 70.431 100.085 71.3569L103.911 75.1831C104.837 74.864 105.905 75.0701 106.644 75.8106C107.677 76.8434 107.677 78.5176 106.644 79.551C105.61 80.5845 103.936 80.5845 102.902 79.551C102.125 78.7733 101.933 77.6317 102.327 76.6741L98.7588 73.1063L98.7583 82.4964C99.0104 82.6208 99.248 82.7871 99.458 82.9963C100.491 84.029 100.491 85.7028 99.458 86.7377C98.4247 87.7705 96.7499 87.7705 95.7177 86.7377C94.6846 85.703 94.6846 84.0293 95.7177 82.9963C95.9731 82.7411 96.2684 82.5484 96.5836 82.4193V72.9422C96.2684 72.8132 95.9736 72.6218 95.7177 72.365C94.9351 71.583 94.7467 70.4345 95.1481 69.4731L91.2344 65.5594L80.9006 75.8926C80.0325 76.7613 80.0325 78.169 80.9006 79.0372L95.9717 94.1074C96.8396 94.9753 98.2467 94.9753 99.1159 94.1074L114.116 79.1072C114.984 78.2387 114.984 76.8303 114.116 75.9624V75.9624Z'
      fill='#222426'
    />
  </g>
</svg>

TL;DR. viewBox defines the container. path draws graphics inside.

TL;DR. `viewBox` defines the container. `path` draws graphics inside.