hburkes88 Posted October 26, 2017 Share Posted October 26, 2017 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. Quote Link to comment Share on other sites More sharing options...
hburkes88 Posted October 26, 2017 Author Share Posted October 26, 2017 5x.svg Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted October 26, 2017 Staff Share Posted October 26, 2017 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 Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
hburkes88 Posted October 26, 2017 Author Share Posted October 26, 2017 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 Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted October 27, 2017 Staff Share Posted October 27, 2017 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 Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
R C-R Posted October 27, 2017 Share Posted October 27, 2017 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
hburkes88 Posted October 27, 2017 Author Share Posted October 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
R C-R Posted October 27, 2017 Share Posted October 27, 2017 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Fixx Posted October 27, 2017 Share Posted October 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
hburkes88 Posted October 27, 2017 Author Share Posted October 27, 2017 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.) Quote Link to comment Share on other sites More sharing options...
R C-R Posted October 27, 2017 Share Posted October 27, 2017 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Fixx Posted October 29, 2017 Share Posted October 29, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.