Recommended size for SVG images

[Geobop]

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.

[JJMack]

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. 

[Ussnorway]

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

[D Fosse]

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.

[Geobop]

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

[jane-e]

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

[jane-e]

"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

[Ussnorway]

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

[Mylenium]

Given that WordPress uses specific image sizes tied to its themes and derived from the standard size steps defined therein it's pretty much irrelevant for inline post images and other stuff such as banners. I feel you are not considering this point at all. If at all, this only has any meaning for graphics that you re-use a lot at different scales, but even then there's a trade-off: Complex vector artwork can result in larger files than equally suitable pixel images and rasterizing vectors costs performance, which could be a critical issue on weaker mobile devices. Similarly, not all embedded fanciness will evaluate inside an SVG, as browser security settings or in fact WordPress' own formatting and security measures may override or prevent execution of JavaScript code, loading of externally linked images, custom CSS formatting. Also Wordpress will resize and recompress JPEG and PNG images server-side to optimize web page delivery for different target devices (if configured in such a way), which it can't do with SVGs. In a bad case scenario you may be forcing a bloated SVG upon your users where a crunched down JPEG auto-generated by the server would have been the better choice. All this needs to be considered. You could create the nicest vector image, but it may be ultimately not be more useful than a flattened PNG or even a worse version of it.

Mylenium