jonwright Posted June 13, 2018 Share Posted June 13, 2018 I've created a logo for my website which is 250px x 250px. I export it to SVG and it opens at the correct size in other applications, such as Sketch, but when I upload it to my CMS (Webflow) it is only 150px x 150px. I've tried fiddling with the settings but can't seem to change it. Is there something obvious I'm missing on export? Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 Hi @jonwright, Welcome to the forums. Make sure your document DPI matches your Export DPI. Thanks, Gabe. Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Hey @GabrielM, thanks! My document and export DPI are both set to 72, but it doesn't seem to make a difference. Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 It looks like it's a web flow issue. See below: https://forum.webflow.com/t/svgs-not-appearing-correctly/40021 Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Hmm, I'm not so sure. My SVG's are displaying in Webflow, just at a reduced size. To double check, I opened the the Affinity Designer SVG in Sketch, then exported it again as an SVG from Sketch. The SVG exported from Sketch was then the correct size in Webflow. Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 Can you attach the file so we can have a look? .AFDESIGN and both SVG's Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Sure, before I do, I've just spotted this difference in the SVG files produced, the following line appears in the AD version: <g transform="matrix(1,0,0,1,-100,-100)"> '-100' is the exact amount the SVG images are being reduced by in Webflow. Could this be the reason? Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Here are some test files, with a simple square. SVG Test.afdesign Sketch.svg AD.svg Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 Can you please do another test with 144dpi, in both document setup and export? Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Sure, here we go: SVG Test 144dpi.svg SVG Test.afdesign Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 I mean, do you get the same "downscale" with the 144dpi? Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 Oh, sorry, yes I do, it still shows at 150px x 150px when uploaded. Quote Link to comment Share on other sites More sharing options...
Staff Gabe Posted June 13, 2018 Staff Share Posted June 13, 2018 Your SVG has that extra line <g transform="matrix(1,0,0,1,-100,-100)"> While mine hasn't got it. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 1280 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <rect x="100" y="100" width="300" height="300" style="fill:rgb(163,126,0);"/> </svg> Try to upload this version and check. Also, how do you export it? What preset? Mac or windows?? SVG Test(5).svg Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 When I'm exporting, I select 'Selection Without Background' or I'll get the whole artboard, which is included in the file you just sent. When uploaded, it seems to have included the artboard, but still made the image small - 250px x 150px. I'm on Mac OS 10.13.5. Quote Link to comment Share on other sites More sharing options...
jonwright Posted June 13, 2018 Author Share Posted June 13, 2018 I think I figured it out. AD always outputs the size as 100% x 100% no matter what the dimensions. I change the XML to the pixel values and all worked correctly on upload. 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.