SVG export file size horrific huge

[jonasbonas]

Hi there,

i often have the problem, that i do website banners in 1500px x  480px size. It is an image with some text on it. As the build in compression for jpg in an svg file is really bad, i scale the background to a small file size in an online converter and place it again.

But now i have the problem, that some Artboards export a small file size, some dont. The jpgs i place are always pretty small. About 50kb. + text as vector it should be around 80-100kb.

But for some reason some exports increase to around 500kb. Is there any problem known like this? Or is the export feature in Designer just rubbish? 

 

//edit: It seems to be the creation of the jpg. Maybe it writes some wrong lines coming out ouf affinity designer, i dont know. I created the background image in Photoshop and just put text on it in Designer and it works perfectly.

[v_kyr]

Just take a look into the generated SVG files what they contain, these are just XML based text files and thus you can open & inspect them in any text editor. - It's possible that for those huger SVG files here it's not all just plain vectors and that certain things have been instead be embedded as base64 encoded JPG images too.

[jonasbonas]

But what does that mean to me? 

If i create the background image in Designer -> export as jpg. Convert it with an online image tool to smaller size -> Put it back into Designer -> huge svg file size

If i create the background image in Photoshop -> export as jpg. Convert it with an online image tool to smaller size -> Put it back into Designer -> small svg file size

I think Designer just does have a bad jpg export.. The funny thing is, the case is just with a bunch of images. Some are working great, some are not... 

[v_kyr]

First of all it's unclear to me why you are using this procedure at all here ...

11 minutes ago, jonasbonas said:

If i create the background image in Designer -> export as jpg. Convert it with an online image tool to smaller size -> Put it back into Designer -> huge svg file size

... either I deal with exported SVGs or JPGs as banner files, but I usually don't export something first as a bitmap JPG in order to afterwards load it again in for performing a SVG export. - So what do you finally want to have here, a plain SVG banner file or a JPG bitmap banner file sized as 1500px x  480px?

[jonasbonas]

Well, i want to have a website Header Picture. Picture in the background. Text in the foreground. The text should be in vector format (scalable). So svg is the way to go i think. When i make a collage in Designer for the background (text in front) and export it as svg the filesize is very huge. Because its not a good compression for jpg in the background. Thats why I have the workaround.

[v_kyr]

So you basically use SVG here just to for scaling up/down the text portion on demand of a finally output bitmap/pixel banner image. Therefor you don't usually need a whole SVG file at all, if you don't change the text portion size that often here.

Just create your 1500 x 480 px size header picture (...for web output in ADe as a 72/96 dpi doc), place the graphics text on it in the needed size and export the whole as an JPG image (check the JPG export settings). - Now compare that size wise to your above described method via going the SVG route, by using the same doc settings and JPG compression.

2 hours ago, jonasbonas said:

But now i have the problem, that some Artboards export a small file size, some dont. The jpgs i place are always pretty small. About 50kb. + text as vector it should be around 80-100kb.

For this you have to check the Artboard sizes etc., if there is some difference between those in setup and sizes, or if the contents placed on those differs size wise. - There usually must be a reason/cause for that behavior you described initially (... if it's not some general Artboard related bug here).

[jonasbonas]

Well, i guess it is not about to explain the website workaround to me... My webmasters decided to use svg for different reasons i guess. And if you have text converted to jpg it wont be as sharp as svg text. Also if you scale it, it will look like rubbish. (mobile, tablet, etc.) 

I use SVG because its a picture in the background and a vector text in the foreground. JPG only just wont do it.

I still think the problem is the Affinity Designer, not why I want to use SVG for the Headers  

 

[v_kyr]

43 minutes ago, jonasbonas said:

I use SVG because its a picture in the background and a vector text in the foreground. JPG only just wont do it.

If the background picture would also be some vector drawing (... a logo, vector banner etc.) instead of a bitmap/pixel image, then it would make entirely more sense to have the whole as arbitrary scalable SVG vectors here. - But having instead just embedded bitmap images in SVG files, isn't overall that useful for SVG output which probably has to be scaled up/down afterwards. - Meaning here the bitmap/pixel portion inside the SVG will degenerate too that way, if the final SVG output file has probably to be rescaled and the like.

Quote

I still think the problem is the Affinity Designer, not why I want to use SVG for the Headers

Check and compare with PS/Ai (as far as you have and use those too) where the overall differences are here. Then it should show up, if it's more an ADe problem.

 

[laurent32]

Can we have 2 examples of 1500x480 svg ?

One svg you consider optimum and one svg you consider too heavy ?

What final svg weight would you hope to get for a 1500x480 px file ?

[jonasbonas]

it is something like in the attachment. i cant rebuild the huge version as i fixed it via photoshop.. (exporting the background) if I will have the same issue again, i will post it here...

fruhtest.svg