Recommended size for SVG images

Engaged ,
Jan 07, 2021

Copy link to clipboard

Copied

I've been creating JPG and PNG files for my WordPress websites. I'm new to SVG, but I like the idea of scalable images that may have a smaller file size and more functionality to boot.

 

However, if I save an image that's 2,000 pixels wide as a SVG, the file size might actually be bigger. But I can decrease the file size by decreasing the image size. 1,000 pixels has a smaller file size, while 500 px is smaller yet.

 

So my question is how small can/should I make a SVG image? For example, if I want to replace a 2000px JPG header with the same image saved as a SVG, can I make it as small as 100 pixels?

Thanks.

TOPICS
How to

Views

78

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Recommended size for SVG images

Engaged ,
Jan 07, 2021

Copy link to clipboard

Copied

I've been creating JPG and PNG files for my WordPress websites. I'm new to SVG, but I like the idea of scalable images that may have a smaller file size and more functionality to boot.

 

However, if I save an image that's 2,000 pixels wide as a SVG, the file size might actually be bigger. But I can decrease the file size by decreasing the image size. 1,000 pixels has a smaller file size, while 500 px is smaller yet.

 

So my question is how small can/should I make a SVG image? For example, if I want to replace a 2000px JPG header with the same image saved as a SVG, can I make it as small as 100 pixels?

Thanks.

TOPICS
How to

Views

79

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 07, 2021 0
Most Valuable Participant ,
Jan 07, 2021

Copy link to clipboard

Copied

Vector image can be scaled to any size. It s all Math.  File size would depends on how many layers and how complex the vector paths are. Vector data would likely be larger then pixel data it you try to vectorize a raster image.  Vector graphics can not handle all the details in a raster image. 

JJMack

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2021 2
Most Valuable Participant ,
Jan 07, 2021

Copy link to clipboard

Copied

in the real world vector images for web design are small icon size and yes its true that vector can be scalled up to any size but the issue is that the Cpu of the users device at the other end is what has to do the math when putting a vector image together... thats why Jpg came back into style

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2021 2
Adobe Community Professional ,
Jan 07, 2021

Copy link to clipboard

Copied

Pixel-based images aren't scalable. Period. It doesn't matter what file format wrapper you put them in. Putting a jpeg inside an SVG wrapper doesn't change anything.

 

Only true vector data, created in Illustrator or similar, are scalable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 07, 2021 2
Engaged ,
Jan 08, 2021

Copy link to clipboard

Copied

So it sounds like I need to learn how to work with Illustrator. 😉

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2021 0
Adobe Community Professional ,
Jan 08, 2021

Copy link to clipboard

Copied

If you don't have Illustrator, then you can get a 7-day trial to confirm it works. Draw some simple shapes, apply some appearances (fills, strokes), then export to svg and see if it works as you expect. Be sure to cancel if you decide not to continue.

~ Jane

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2021 0
Adobe Community Professional ,
Jan 08, 2021

Copy link to clipboard

Copied

"So my question is how small can/should I make a SVG image?"

 

As @D Fosse said, SVG is vector and you should be drawing in Illustrator, which exports to SVG. Illustrator has a feature to scale the strokes and live corners proportionally, so, yes, you can scale to 10% or 10,000% and it will look the same.

 

It does not work for pixels.

 

~ Jane

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2021 1
Most Valuable Participant ,
Jan 08, 2021

Copy link to clipboard

Copied

actually I'm saying Jpg came back into style in web design because small devices like phones and tablets have issue with vector not that you should somehow try to scale a Jpg mate

 

p.s, you can use Photoshop to make \ open SVGs but yes Illustrator is normally the better tool

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2021 0