search

orlandotm / payment-webfont

An SVG webfont full of main payment system icons
http://www.orlandotm.com/payment-webfont/
Creative Commons Zero v1.0 Universal
1.24k stars 138 forks source link

Include SVG icon source files in repo #50

Open beausmith opened 9 years ago

beausmith commented 9 years ago

I was looking for a few of these logos in SVG format. I could pull them out of the SVG font file. Being that these logos all come from other companies, I can't see any issue with including the source SVG files here. So many benefits, no downside. =)

afknapping commented 9 years ago

+1

paulprins commented 8 years ago

While I know this isn't really what you meant - all the svg vector data is in the payment-webfont.svg file. You just need to know which glyph you need (these are in the CSS file - ex: American Express is 'e607').

Open the webfont.svg file in your text editor of choice. Run a search for the glyph code from the css file, and you'll see a node that starts with <glyph.... Find the attribute of that node labeled d. Pro-tip, each line of that file is a new glyph. Helps with finding the ends of each individual glyph.

Create a new file called whatever-payment-method.svg and start with the following

<svg height="200px width="200px"><path d="" /></svg>

Copy+Paste the value from the webfont.svg into your new file for the d value. Then you can open that file in illustrator (or whatever) and make sure the art boards work. Repeat as needed. GL!

tarsonis123 commented 3 years ago

While I know this isn't really what you meant - all the svg vector data is in the payment-webfont.svg file. You just need to know which glyph you need (these are in the CSS file - ex: American Express is 'e607').

Open the webfont.svg file in your text editor of choice. Run a search for the glyph code from the css file, and you'll see a node that starts with <glyph.... Find the attribute of that node labeled d. Pro-tip, each line of that file is a new glyph. Helps with finding the ends of each individual glyph.

Create a new file called whatever-payment-method.svg and start with the following

<svg height="200px width="200px"><path d="" /></svg>

Copy+Paste the value from the webfont.svg into your new file for the d value. Then you can open that file in illustrator (or whatever) and make sure the art boards work. Repeat as needed. GL!

What a damn work for a simple icon. Jezz. He should upload the svg. The companies aren't his anyway... Complete overboard package for a stupid little function. But thanks for the workaround even I won't go this road.

paulprins commented 3 years ago

@tarsonis123 I setup a different payment icon repository that has seperate icons - FreshVine/Payment-Methods-SVG