Files in format .png or .jpg are easy to resize and in most cases, you do not need to use any special software to do it.
The resizing is more complicated when you want to change the size for .svg format files.
What is making the .svg different from other image formats?
There can be a lot of confusion about which kind of image format to use to achieve the best result in any given situation.
In the case of .jpg and .png formats, the size of the image depends on the number of pixels. The image resolution is therefore defined by the number of pixels that defined the height and width of an image.
The .svg is a vector-based image format. SVG defines the graphics in XML format. A vector image uses geometric forms such as points, lines, curves, and shapes to represent different parts of the image as discrete objects. This is why they retain their high quality no matter how much you scale them (more about the .svg file you can read here).
How to resize a SVG image?
SVG images can be created and edited with any text editor but it is often more convenient to create SVG images with a drawing program, like Illustrator, Sketch, Inkscape, or another vector-based program.
I am using two ways to resize .svg files by using the text editor (you can use any text editor to resize your image).
Option 1:
When you will open the .svg file in the text editor it should show lines of code.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>The width and height attributes of the element define the width and height of the SVG image. So you can change the width and height to what you want.
Option 2:
If you haven’t defined the width and the height of the image in the SVG code you can adjust the size in CSS:
svg {
width:10%;
}
Example:
Hope this helps!
Hey, here’s something that might interest you: