afandi_line Posted April 6, 2017 Share Posted April 6, 2017 i dont understand how to mkae a svg icon with 1 kb size and no color, any can help me? Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted April 6, 2017 Staff Share Posted April 6, 2017 Hi afandi_line, Welcome to Affinity Forums :) I'm not sure i understood your question. Where have you seen those requirements? What are you trying to create? Is this for an icon-font or something similar? Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
afandi_line Posted January 15, 2018 Author Share Posted January 15, 2018 yes for icon-font Quote Link to comment Share on other sites More sharing options...
jenkm Posted January 15, 2018 Share Posted January 15, 2018 Try SVG Optimizer to reduce the size: https://jakearchibald.github.io/svgomg/ Quote Link to comment Share on other sites More sharing options...
Piotr Michałak Posted January 15, 2018 Share Posted January 15, 2018 SVG is a text format similar to HTML. You may simply edit the SVG files in Notepad or any other text edition. Simply remove all unnecessary color fills but leave shapes intact. That's all. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted January 15, 2018 Staff Share Posted January 15, 2018 Hi afandi_line, You have to flatten al vector layers/elements that compose the icon using boolean operations to merge them and end up with a single shape. Lines must be converted to shapes (menu Layer ▸ Expand Stroke) before you can perform boolean operations with them. Then you can export them as SVG's and import them on iconmoon or other service to create the font. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
AffinityBrah Posted March 14, 2019 Share Posted March 14, 2019 On 1/15/2018 at 6:42 AM, MEB said: Hi afandi_line, You have to flatten al vector layers/elements that compose the icon using boolean operations to merge them and end up with a single shape. Lines must be converted to shapes (menu Layer ▸ Expand Stroke) before you can perform boolean operations with them. Then you can export them as SVG's and import them on iconmoon or other service to create the font. I know this thread is from last year, but I can't seem to get my Icon Font to register on Fontastic. I have expanded the strokes already. What do you mean by flatten al vector layers/elements? My icon is on a single artboard. Titanium.svg Quote Link to comment Share on other sites More sharing options...
v_kyr Posted March 14, 2019 Share Posted March 14, 2019 16 minutes ago, AffinityBrah said: ...mean by flatten al vector layers/elements? He meant to combine/merge all layers into just one, aka one layer and all in one shape. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
AffinityBrah Posted March 15, 2019 Share Posted March 15, 2019 On 3/14/2019 at 9:01 AM, v_kyr said: He meant to combine/merge all layers into just one, aka one layer and all in one shape. Ok Thanks! I did try that, but still Fontastic does not accept it? I will upload the new file. I exported the SVG as "Selection without background". The only thing that is checked on the export is "Set viewBox" Titanium.svg Quote Link to comment Share on other sites More sharing options...
v_kyr Posted March 16, 2019 Share Posted March 16, 2019 32 minutes ago, AffinityBrah said: I did try that, but still Fontastic does not accept it? Well I don't know if that Fontastic service has any restrictions, or offers hints how a generated and uploaded SVG has to be defined in order to be parsed. Since I'm not going to make a never used account there for try outs, I've just downloaded a SVG sample from their icons overview page, in order to take a quick look inside for comparison with a text editor. - Their SVG icons there look like this ... <?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg enable-background="new 0 0 48 48" height="48px" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Expanded"> <g> <g> <path d="M42,48H28V35h-8v13H6V27c0-0.552,0.447-1,1-1s1,0.448,1,1v19h10V33h12v13h10V28c0-0.552,0.447-1,1-1s1,0.448,1,1V48z"/> </g> <g> <path d="M47,27c-0.249,0-0.497-0.092-0.691-0.277L24,5.384L1.691,26.723c-0.399,0.381-1.032,0.368-1.414-0.031 c-0.382-0.399-0.367-1.032,0.031-1.414L24,2.616l23.691,22.661c0.398,0.382,0.413,1.015,0.031,1.414 C47.526,26.896,47.264,27,47,27z"/> </g> <g> <path d="M39,15c-0.553,0-1-0.448-1-1V8h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h8v8C40,14.552,39.553,15,39,15z"/> </g> </g> </g> </svg> Yours is smaller uses width/height percentage settings, transformations and style defs and looks like this instead ... <?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 31 31" 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;"> <g transform="matrix(1,0,0,1,-0.34901,-0.362837)"> <g transform="matrix(0.379299,0,0,0.534808,-448.284,0)"> <g transform="matrix(2.63644,0,0,1.86983,-1933.27,-1.5733)"> <path d="M1204.17,1.226C1208.37,1.306 1212.12,4.996 1212.2,9.255C1212.23,13.915 1212.23,18.575 1212.2,23.234C1212.12,27.411 1208.56,31.18 1204.17,31.263C1199.23,31.295 1194.18,31.763 1189.36,31.211C1185.51,30.769 1182.24,27.326 1182.16,23.234C1182.13,18.261 1181.6,13.226 1182.22,8.326C1182.71,4.505 1186.18,1.302 1190.19,1.226C1194.85,1.197 1199.51,1.197 1204.17,1.226ZM1190.3,3.726C1187.36,3.744 1184.72,6.313 1184.66,9.287C1184.63,13.949 1184.57,18.613 1184.66,23.275C1184.75,26.141 1187.26,28.671 1190.15,28.762C1194.83,28.851 1199.52,28.851 1204.21,28.762C1207.09,28.671 1209.64,26.135 1209.7,23.202C1209.73,18.54 1209.78,13.876 1209.69,9.214C1209.6,6.323 1207.05,3.782 1204.13,3.726C1199.52,3.697 1194.91,3.726 1190.3,3.726ZM1201.85,22.388C1201.48,22.388 1201.18,22.288 1200.94,22.089C1200.7,21.889 1200.58,21.595 1200.58,21.206L1200.58,15.129C1200.58,14.741 1200.7,14.447 1200.95,14.247C1201.19,14.047 1201.49,13.947 1201.85,13.947C1202.2,13.947 1202.5,14.047 1202.74,14.247C1202.97,14.447 1203.09,14.741 1203.09,15.129L1203.09,21.206C1203.09,21.595 1202.97,21.889 1202.74,22.089C1202.5,22.288 1202.2,22.388 1201.85,22.388ZM1195.74,12.665L1195.74,21.09C1195.74,21.478 1195.62,21.789 1195.38,22.022C1195.15,22.255 1194.84,22.372 1194.44,22.372C1194.05,22.372 1193.73,22.255 1193.5,22.022C1193.26,21.789 1193.14,21.478 1193.14,21.09L1193.14,12.665L1190.44,12.665C1189.62,12.665 1189.21,12.31 1189.21,11.6C1189.21,10.9 1189.62,10.551 1190.44,10.551L1198.43,10.551C1199.25,10.551 1199.66,10.9 1199.66,11.6C1199.66,12.31 1199.25,12.665 1198.43,12.665L1195.74,12.665ZM1201.85,12.615C1201.4,12.615 1201.05,12.501 1200.8,12.274C1200.54,12.046 1200.41,11.738 1200.41,11.35C1200.41,10.961 1200.54,10.656 1200.8,10.434C1201.05,10.212 1201.4,10.101 1201.85,10.101C1202.28,10.101 1202.62,10.215 1202.88,10.443C1203.15,10.67 1203.28,10.973 1203.28,11.35C1203.28,11.738 1203.15,12.046 1202.89,12.274C1202.64,12.501 1202.29,12.615 1201.85,12.615Z" style="fill:rgb(70,70,70);fill-rule:nonzero;"/> </g> </g> </g> </svg> Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
AffinityBrah Posted March 16, 2019 Share Posted March 16, 2019 1 hour ago, v_kyr said: Well I don't know if that Fontastic service has any restrictions, or offers hints how a generated and uploaded SVG has to be defined in order to be parsed. Since I'm not going to make a never used account there for try outs, I've just downloaded a SVG sample from their icons overview page, in order to take a quick look inside for comparison with a text editor. - Their SVG icons there look like this ... <?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg enable-background="new 0 0 48 48" height="48px" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Expanded"> <g> <g> <path d="M42,48H28V35h-8v13H6V27c0-0.552,0.447-1,1-1s1,0.448,1,1v19h10V33h12v13h10V28c0-0.552,0.447-1,1-1s1,0.448,1,1V48z"/> </g> <g> <path d="M47,27c-0.249,0-0.497-0.092-0.691-0.277L24,5.384L1.691,26.723c-0.399,0.381-1.032,0.368-1.414-0.031 c-0.382-0.399-0.367-1.032,0.031-1.414L24,2.616l23.691,22.661c0.398,0.382,0.413,1.015,0.031,1.414 C47.526,26.896,47.264,27,47,27z"/> </g> <g> <path d="M39,15c-0.553,0-1-0.448-1-1V8h-6c-0.553,0-1-0.448-1-1s0.447-1,1-1h8v8C40,14.552,39.553,15,39,15z"/> </g> </g> </g> </svg> Yours is smaller uses width/height percentage settings, transformations and style defs and looks like this instead ... <?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 31 31" 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;"> <g transform="matrix(1,0,0,1,-0.34901,-0.362837)"> <g transform="matrix(0.379299,0,0,0.534808,-448.284,0)"> <g transform="matrix(2.63644,0,0,1.86983,-1933.27,-1.5733)"> <path d="M1204.17,1.226C1208.37,1.306 1212.12,4.996 1212.2,9.255C1212.23,13.915 1212.23,18.575 1212.2,23.234C1212.12,27.411 1208.56,31.18 1204.17,31.263C1199.23,31.295 1194.18,31.763 1189.36,31.211C1185.51,30.769 1182.24,27.326 1182.16,23.234C1182.13,18.261 1181.6,13.226 1182.22,8.326C1182.71,4.505 1186.18,1.302 1190.19,1.226C1194.85,1.197 1199.51,1.197 1204.17,1.226ZM1190.3,3.726C1187.36,3.744 1184.72,6.313 1184.66,9.287C1184.63,13.949 1184.57,18.613 1184.66,23.275C1184.75,26.141 1187.26,28.671 1190.15,28.762C1194.83,28.851 1199.52,28.851 1204.21,28.762C1207.09,28.671 1209.64,26.135 1209.7,23.202C1209.73,18.54 1209.78,13.876 1209.69,9.214C1209.6,6.323 1207.05,3.782 1204.13,3.726C1199.52,3.697 1194.91,3.726 1190.3,3.726ZM1201.85,22.388C1201.48,22.388 1201.18,22.288 1200.94,22.089C1200.7,21.889 1200.58,21.595 1200.58,21.206L1200.58,15.129C1200.58,14.741 1200.7,14.447 1200.95,14.247C1201.19,14.047 1201.49,13.947 1201.85,13.947C1202.2,13.947 1202.5,14.047 1202.74,14.247C1202.97,14.447 1203.09,14.741 1203.09,15.129L1203.09,21.206C1203.09,21.595 1202.97,21.889 1202.74,22.089C1202.5,22.288 1202.2,22.388 1201.85,22.388ZM1195.74,12.665L1195.74,21.09C1195.74,21.478 1195.62,21.789 1195.38,22.022C1195.15,22.255 1194.84,22.372 1194.44,22.372C1194.05,22.372 1193.73,22.255 1193.5,22.022C1193.26,21.789 1193.14,21.478 1193.14,21.09L1193.14,12.665L1190.44,12.665C1189.62,12.665 1189.21,12.31 1189.21,11.6C1189.21,10.9 1189.62,10.551 1190.44,10.551L1198.43,10.551C1199.25,10.551 1199.66,10.9 1199.66,11.6C1199.66,12.31 1199.25,12.665 1198.43,12.665L1195.74,12.665ZM1201.85,12.615C1201.4,12.615 1201.05,12.501 1200.8,12.274C1200.54,12.046 1200.41,11.738 1200.41,11.35C1200.41,10.961 1200.54,10.656 1200.8,10.434C1201.05,10.212 1201.4,10.101 1201.85,10.101C1202.28,10.101 1202.62,10.215 1202.88,10.443C1203.15,10.67 1203.28,10.973 1203.28,11.35C1203.28,11.738 1203.15,12.046 1202.89,12.274C1202.64,12.501 1202.29,12.615 1201.85,12.615Z" style="fill:rgb(70,70,70);fill-rule:nonzero;"/> </g> </g> </g> </svg> So I ended up trying Iconmoon, worked right away. Nothing was wrong with my icons at all. It was just Fontastic. Thanks again v_kyr 1 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.