Why are my vector curves rasterized upon export in Designer?

[hburkes88]

I have created a vector logo that I am trying to send to my web developer.

I am trying to export a vector logo that has mostly vector elements, with the exeption of an opaque raster background texture. The "TAB" at the top and the shapes at the top are all vector curves.

 

The issue that I am having is that the text as well as the shapes that make up the top portion of my logo keeps rasterizing when I export via SVG and then open that SVG back up in Affinity Designer. I have been using the default settings for SVG Web as well as SVG Print. Print seems to be clearer but the top object and text still rasterize, while the bottom doesn't. I have tried playing with the DPI and resampling DPI but am still new to formatting and not sure what the optimal settings are to export for a website logo.

 

I don't think that it is an issue with my paths or workflow because the bottom section is structured the same as the top, but stays as a vector.

I will attach a .jpg of the logo and can send the svg and/or the .AF file if anyone would care to analyze what I am doing wrong.

[hburkes88]

5x.svg

[Callum]

Hi Hburkes88,

 

Please could you provide the .af files so I can look into this further for you? By looking at the jpeg I suspect you have effects on the objects which is causing them to be rasterised.

 

C

[hburkes88]

Surely, thanks! 

 

If you would also please look at how,in the exported .SVG file,  it crops the raster/texture layer(which has a lowered %opacity) in the bottom of the logo/order and darkens the texture from the original .AF file. (I guess I have done something weird with the paths or the opacity applied to the texture layer is doing this?)

 

I have tried playing with the DPI settings as well as the resampler to Bicubic or Lanczos but am still unsure of what exactly those settings need to be for, in this case, web and for other formats for usage in different places. I am also unclear on proper sizing of the object before export, even after doing much reading on the subject. Any light that could be shed would be appreciated.

 

*I have gone through the entire front section of the Affinity Work Book and some of the exercises, so please forgive me if this is covered in the later projects. I am under a time crunch to complete this. 

Actual_TAB_Logo.afdesign

[Callum]

Hi Hburkes88,

 

It looks as though the file is being rasterised due to the FX you have applied to some of your layers. If you click the more button during export then set Rasterise to nothing it should look fine  I can't recreate the cropping issue you are experiencing I'm afraid.

 

Thanks

C

[R C-R]

1 hour ago, Callum said:

If you click the more button during export then set Rasterise to nothing it should look fine

Rasterize nothing won't preserve the 3D effects on the letters, so the SVG export will look something like this:

Also, reimporting the SVG export back into Affinity Designer I get this:

With the layers panel expanded for the lower section, there is a cropping mask, a crosshatch image, & a tan rectangle, but they do not combine to form the same texture effect as in the first image above:

 

However, using Quick Look or Finder to view the exported SVG (with or without rasterizing) the texture looks fine.

[hburkes88]

1 hour ago, R C-R said:

Rasterize nothing won't preserve the 3D effects on the letters, so the SVG export will look something like this:

 

With the layers panel expanded for the lower section, there is a cropping mask, a crosshatch image, & a tan rectangle, but they do not combine to form the same texture effect as in the first image above:

 

Thanks for the replies, RCR and Callum.

So if I am exporting to send to my web developer to build a new site then is it better to lose the FX and export those elements as vector or go ahead and let them rasterize?

 

Yes, R C-R, that is the other issue That I was trying to describe. If you look at the layers panel on the original .AF file there is no cropping involved. It is just a shape and clipped inside the shape is a raster texture image, with an opacity of about 40% or less and a brown shape.

 

 

[R C-R]

1 minute ago, hburkes88 said:

So if I am exporting to send to my web developer to build a new site then is it better to lose the FX and export those elements as vector or go ahead and let them rasterize?

That is up to you. If the 3D effect is an important part of the logo, either allow rasterization or (tediously) recreate it using multiple vectors of different colors stacked to get (more or less) the same look.

 

6 minutes ago, hburkes88 said:

Yes, R C-R, that is the other issue That I was trying to describe. If you look at the layers panel on the original .AF file there is no cropping involved. It is just a shape and clipped inside the shape is a raster texture image, with an opacity of about 40% or less and a brown shape.

Well, in a sense clipping is cropping, but even so I think the 'round trip' export & import of the SVG version should have the same or nearly the same layer structure.

 

I also have no idea why Finder views & Quick Look display the exported SVG with the texture over the tan rectangle & properly clipped to it, but the implication is the SVG import function in Affinity still needs work. It might be better in the current 1.6 beta but I have not tried it with that.

[Fixx]

If you are using the logo only in www there is no sense keeping it vector - it must be saved to png or jpg anyway (unless.your coder invents some fancy svg solution). Rasterized version will also be good enough for most printed matter if resolution is high enough.

[hburkes88]

Got you, R C-R, thanks for your input!

 

Thanks Fixx! This might be asking a bit much but... Would you mind giving some advice as to what size to make the logo and what optimal export settings would be if it is going to a web developer? I am still unclear on what exactly I am doing when I change the DPI and downsampling settings, etc. (I have read many articles on it but still don't quite grasp it.)

[R C-R]

DPI is irrelevant for exporting to pixel-based (rasterized) file formats for web pages. What matters is the pixel resolution of the file (how many total pixels it includes), its intended display size on the web page (like covering most of the page or just a small section of it), & the most acceptable tradeoff between high quality (which requires larger file sizes with more pixels & no or little lossy compression & thus longer download times) & fast loading of the page.

 

Your web developer should be able to advise you about this, based on the layout of the pages & what you find most acceptable in terms of quality vs. load times.

[Fixx]

As you may need logo later in printed matter also, I would keep original artwork hi res (possibly in vectors also) and scale it down in export.

Only developer knows suitable end size as modern web publishing systems may scale images internally or render right size at demand in browser, or maybe developer wants to scale images by him/herself...

Of course you can offer some size that seems right to you – you can measure pixel size from page dummy for example.