Trying to resize a SVG (not just modify the viewbox) and then save a new SVG at the new size

Aspose.SVG Product Family
1

I have a script that saves out icons at a specified size. As an example:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.89443 7H1.27639L0 4.44721L1.78885 3.55279L2.51246 5H3.16199C3.35185 4.67178 3.63231 4.40253 3.96917 4.22643C4.3295 2.38749 5.94993 1 7.89443 1C9.83892 1 11.4594 2.38749 11.8197 4.22644C12.1565 4.40253 12.437 4.67179 12.6269 5H13.2764L14 3.55279L15.7889 4.44721L14.5125 7H12.8944V8H14.8944V10H12.8944V11H14.5125L15.7889 13.5528L14 14.4472L13.2764 13H12.6384C12.0206 14.7478 10.3538 16 8.39443 16H7.39443C5.4351 16 3.76824 14.7478 3.15049 13H2.51246L1.78885 14.4472L0 13.5528L1.27639 11H2.89443V10H0.894427V8H2.89443V7ZM9.62686 4C9.28105 3.4022 8.63471 3 7.89443 3C7.15414 3 6.5078 3.4022 6.16199 4H9.62686ZM4.89443 11.5V6H10.8944V11.5C10.8944 12.8807 9.77514 14 8.39443 14H7.39443C6.01372 14 4.89443 12.8807 4.89443 11.5Z" fill="#000716"/>
</svg>

I want to resize this SVG to 32x32px. Not by manipulating the viewBox, but actually performing the scale on the path itself and then setting the top level svg node’s width / height / viewbox properties to 32px. I can’t find any documentation on manipulating a SVG’s dimensions nor can I find documentation about a SVG to SVG pipeline. Can someone point me in the right direction? Thanks much.

2

@visusys

We have logged an investigation ticket in order to analyze how your particular requirement can be achieved. The ticket ID is SVGNET-119 and it has been linked with this forum thread. You will be notified as soon as it is resolved. Please spare us some time.

3

@visusys

Next code demonstrates how to

performing the scale on the path itself and then setting the top level svg node’s width / height / viewbox properties to 32px

// open svg document
using var document = new SVGDocument("test.svg");
//add scale effect to tranform property for all path elements in the document
foreach (var path in document.GetElementsByTagName("path"))
{
    var transform = path.GetAttribute("transform");
    if (transform == null)
        transform = "scale(2)";
    else
        transform += " scale(2)";
    path.SetAttribute("transform", transform);
}
var svg = document.RootElement as SVGSVGElement;
if (svg != null)
{
    // update width and height properties
    svg.Width.BaseVal.Value = 32;
    svg.Height.BaseVal.Value = 32;
    //update viewbox properties
    svg.ViewBox.BaseVal.X = 0;
    svg.ViewBox.BaseVal.Y = 0;
    svg.ViewBox.BaseVal.Width = 32;
    svg.ViewBox.BaseVal.Height = 32;
}
//save modifided document
document.Save("scaledtest.svg");

We will have the following SVG document after saving:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.89443 7H1.27639L0 4.44721L1.78885 3.55279L2.51246 5H3.16199C3.35185 4.67178 3.63231 4.40253 3.96917 4.22643C4.3295 2.38749 5.94993 1 7.89443 1C9.83892 1 11.4594 2.38749 11.8197 4.22644C12.1565 4.40253 12.437 4.67179 12.6269 5H13.2764L14 3.55279L15.7889 4.44721L14.5125 7H12.8944V8H14.8944V10H12.8944V11H14.5125L15.7889 13.5528L14 14.4472L13.2764 13H12.6384C12.0206 14.7478 10.3538 16 8.39443 16H7.39443C5.4351 16 3.76824 14.7478 3.15049 13H2.51246L1.78885 14.4472L0 13.5528L1.27639 11H2.89443V10H0.894427V8H2.89443V7ZM9.62686 4C9.28105 3.4022 8.63471 3 7.89443 3C7.15414 3 6.5078 3.4022 6.16199 4H9.62686ZM4.89443 11.5V6H10.8944V11.5C10.8944 12.8807 9.77514 14 8.39443 14H7.39443C6.01372 14 4.89443 12.8807 4.89443 11.5Z" fill="#000716" transform="scale(2)"/>
</svg>

Additional information about working with the Aspose.SVG API, as well as code examples, can be found on our documentation site, good examples are here - Aspose.SVG for .NET