larsenwork / web.svg.min Goto Github PK

I thought about doing something like this:

<a class="twitter-social">
  <svg viewbox="0 0 800 800" aria-labelledby="title" role="img">
    <title>Twitter logo</title>
    <path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/>
  </svg>
</a>

SVG spec has <title> tag to help accessibility with screen readers. Oftentimes web developers ignore accessibility, but adding this directly to these svg files would make sure this will always be accessible for blind people:

<a href="#">
  <svg><title>Download on the app store</title> ...</svg>
</a>

Where as otherwise developers would need to do this:

<a href="#" aria-label="Download on the app store">
  <svg> ...</svg>
</a>

Anyone who pays attention to accessibility will make screen readers ignore whole svg or title tag if they want to provide an alternative text (e.g. when doing <a href="#"><svg></svg> Facebook</a>).

Small addition but would make a huge improvement for lots of folks out there. :-)

Please always link to the official brand page and vector assets when requesting (if available).

Example request

Twitter https://about.twitter.com/company/brand-assets
Twitter https://g.twimg.com/brand_guideline_logos_0.zip

I am not a lawyer, but since email isn't a brand/trademark, then this icon must be covered by default copyright. Did you create this? If so, please, attach a proper license, e.g. CC0, or take care of licensing otherwise.

The logo without text, it is contained in this Sprite

Sprite used on official website

Not sure how others use SVG assets, but in my case, I had to trim the whitespace myself, so that the width / height of an image would correspond to the same width / height of its contents. Handy way to trim the whitespace is to just open an SVG image in any browser, run this in the console:

const x = document.getElementsByTagName("svg")[0].getBBox();
console.log(`${x.x} ${x.y} ${x.width} ${x.height}`);

And copy the output into viewBox attribute of the SVG tag.

Twitch (source - their footer):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 3 23 24">
  <path d="M21,9h-2v6h2V9z M5.568,3L4,7v17h5v3h3.886L16,24h5l6-6V3H5.568z M25,16l-4,4h-6l-3,3v-3H8V5h17V16z M16,9h-2v6h2V9z" />
</svg>

You can also add their full logo (website's header logo is SVG too).

Discord (source - their branding page):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="35 20 175 200">
  <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z" />
  <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />
</svg>

Thank you so much for these icons... Would be great if you could add a YouTube icon

YouTube https://www.youtube.com/yt/brand/
YouTube https://www.youtube.com/yt/brand/using-logo.html

A vimeo icon would fit in nicely with your collection.
Similar to this I'm thinking https://commons.wikimedia.org/wiki/File:Vimeo_icon_block.png

https://www.instagram.com/press/?hl=en