Jump to content
You must now use your email address to sign in [click for more info] ×

How to make SVG icon, with no color and 1 kb size


Recommended Posts

  • 9 months later...
  • Staff

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.

 

 

Link to comment
Share on other sites

  • 1 year later...
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

Link to comment
Share on other sites

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.

☛ 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

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

Link to comment
Share on other sites

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>

 

☛ 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

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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.