SVG social-media/follow icons

[TheChymera]

This issue is based on the discussion in pull request #42 and supersedes issue #41.

@yous , you can find the icons I use on my website here. If you want me to process any additional icons, just let me know which from under this directory you think we would also need.

[TheChymera]

as per commit 425cf20 I already started migrating to inline SVG. Sadly, I was unable to procure some SVG icons (please help if you need them!), namely bitbucket and pinboard.

I would very much welcome a way to separate the sytle from the content here (at present we have to specify the width and height, as well as the viewbox of our SVGs in /source/_includes/navigation.html. Also, it would be great if we can actually store the svg content in actual svg files and just referencing them in the HTML file. Sadly, as previously linked there is currently no way to reap the benefits of inline SVG without actually inligning the SVG.

Not least of all, the alignment of the elements in the header is really dodgy. I got them to align nicely via trial and error, but this is def prone to breakage in the future. Maybe we should rewrite the whole navigation bar?

[yous]

There is an issue with small screens. I enabled Bitbucket, GitHub and RSS icons.

But when I see the blog with small width screen, GitHub and RSS are gone. Each ul > li should have own text, otherwise we should show icons even on small screen.

[TheChymera]

Yes, we should make them appear in the drop-down. Sadly, I have not figured out exactly how the dropdown works and where I can edit it. Probably it has to do with Bitbucket still being in the subscription class while GitHub and RSS are in the new subscribe class.

In any case I am pleased to see that the bitbucket icon still integrates well in spite of being in a completely different <ul> class. Still, maybe we should try to get a SVG for it as well (Pinboard is also missing).

[luthfii]

How to convert png file to SVG path? I want to add icon link to my vimeo and flickr

[TheChymera]

use inkscape, though you might actually get better results doing a thorough search for the svg you want online.

[luthfii]

Thanks, and how to convert .svg image to code like this?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="25" height="25" viewbox="0 0 100 100"><path class="social" d="M 100,0 0,0 0,100 100,100 z 
M 95,95 50,95 50.001,50 5,50 5,5 50,5 50.001002,50 95,50 z"></path></svg>

[TheChymera]

open the .svg file in a text editor and look for the part of the file which specifies the verteces. SVG files (which only contain paths) are actually just text.