Jump to content
afandi_line

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

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
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

Share this post


Link to post
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.7.1 ◆ Affinity Photo 1.7.1 ◆ OSX El Capitan

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×