I would like to resize path around 20 pixels.
SVG should be same size of 500 * 500, now the path width is 297 and height is 180.7. Now i need this path with width 277 and height 160.7 inside the previous path.
<!DOCTYPE html>
<html>
<body>
<h1>Scale Paht Svg`**`enter code here`**`</h1>
<svg width="500" height="500">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</svg>
You need to change your code like this:
The SVG canvas is 500 units / 500 units so you can use a viewBox attribute: viewBox="0 0 500 500". Noe you can change the size of your SVG to 20/20 by adding width="20" y="20. Since the scaled down stroke would be very thin you need to add vector-effect="non-scaling-stroke". This way the stroke won't be scaled down.
svg{border:1px solid;}<svg viewBox="0 0 500 500" width="20" y="20">
<path vector-effect="non-scaling-stroke" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</svg>If you need the SVG canvas to be 500px / 500px but only this path to be 20/20px you can use SVG symbols:
svg{border:1px solid;}<svg viewBox="0 0 500 500">
<symbol id="triangle" viewBox="0 0 500 500">
<path vector-effect="non-scaling-stroke" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</symbol>
<use xlink:href="#triangle" width="20" height="20" />
</svg> The OP comments:
SVG should be same size of 500 * 500, now the path width is 297 and height is 180.7. Now i need this path with width 277 and height 160.7 inside the previous path.
Next comes a code example : Y hope this is what you need.
<svg width="500" height="500">
<symbol id="triangle" viewBox="97.5 263.5 297 180.78" >
<path id="test" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" d="M245.5,263.5l-148,179c0,0,287,4,297,0L245.5,263.5z"/>
</symbol>
<use xlink:href="#triangle"/>
<use xlink:href="#triangle" width="277" height="160.7" x="110.5" y="188.5"/>
</svg>