Replace feed.png with feed.svg

fix test and usage

Images look good to me.

I have a small nit-pick... that is these could be made smaller in size.

I am only familiar with inkscape - there is an option to save plain svg, which removes the extra padding.

Is there an option in Sketch to do the same?

The extra stuff in the svg file I can see starts with

attrubute xmlns:sketch="http://www.bohemiancoding.com/sketch/ns

and also this stuff could be removed.

<-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch >
title>feed title
des Created with Sketch. desc
defs> defs

Does D8 have a policy towards poly filling SVGZ files ?

all I could find is that area was
#2092245: SVGZ isn't served with correct encoding
which suggests not yet!

Is there any chance that people wouldn't recognize the RSS icon ? Probably millennials would think that it looks like a wi-fi icon.

As a reference, the RSS board voted in 2006 that this logo is the official "Common feed icon":

They link to the official http://www.feedicons.com/ where can be downloaded in all formats, including SVG (that I attached)

yes yes.. looks ugly, but at least is recognizable.

If we are taking "artistic licence" to modify the RSS logo (I agree here), at least should we use the orange color somewhere?

and this is a GUI tool to squeeze the size of the SVG as much as possible:
https://github.com/jakearchibald/svgomg

The patch otherwise is correct, and removes all occurrences of "feed.png" I found in core.

I couldn't attach the SVG logo, let's open a feature-request :)
#2427443: Allow SVG files as attachment

Looks good to me!
Before:

After:

Can someone attached and update this CR - https://www.drupal.org/node/2384159?

Looks awesome, better than the "official" one, Thumbs up Morten :)

I was reading about "libricons", for reference these 2 links:
This is the "official" thread of libricons #2032773: Use Libricons (icon font) in Seven, consider using it more broadly in core
But actually, the patch that went in, containing the SVG icons is this one: #1963886-106: Use HiDPI icons in the toolbar

Based on these 2 facts:
* Libricons is not a font of icons, and there is no reference of "libricon" in the whole Drupal core base, and no documentation. Just now, It's just a set of 16x16 SVG files in /misc/icons/xxxxxx (where xxxxx is the HEX color)
* Messages icons were modified (coloured) and committed to #2075949: Add Libricons to messages

I would say, that we could put the feed.svg in misc/icons/FF9900/feed.svg ?

Drupal core misc icons should be a set of icons that follow certain pattern, (mono-color 16x16 svg icons)
But it would be short-sighted that only icons designed by ry5n could go into core.

What's your opinion?

Cool! I think is reasonable
Related #2252721: [policy] Document Libricon semantics, including examples
Lewis would have an opinion... but I think he still is in Latin America. I will ping Bojhan and ry5n in twitter, to see if they have something against.

Lewis pointed out that there is a misc/icons/License.md:

The MIT License (MIT)

Copyright (c) 2013 Ryan Frederick

that reflects the License of the icons in that folder.

This is getting too complicated. This would need its own issue.

Maybe we should leave the feed icon where it is now, in misc/feed.svg.

That also give us freedom to make a 2-colour feed icon: Orange+White. The current feed.svg icon is transparent in the center.. so IMO it doesn't look that good in all backgrounds.

Great!, yep I think github is perfect

It's not loading the SVG for me. If I try to open the SVG with Chrome directly, Chrome validates the SVG and outputs this error:
http://drupal8.dev/core/misc/feed.svg

This page contains the following errors:

error on line 6 at column 57: Namespace prefix sketch for type on g is not defined

Also I see that the SVG source code has a lot of "weird" things from Sketch, when I pass it through SVGO y breaks the SVG.
I haven't used Sketch before, but maybe you can play with some settings (like Flatten shapens) https://medium.com/sketch-app/harnessing-vector-awesomeness-in-sketch-3c...

But! If I take the feed.svg directly from your github it works in Chrome, but still, can't be optimized by SVGO*

Could you export SVG from Sketch, in a way that it doesn't have any "translate". SVG markup should be straight paths/shapes. I tried also opening in Illustrator, and re-save it.. but it breaks too.

Here is a tweet, it seems Sketch should be able to "flatten" it

* I use this https://github.com/svg/svgo-gui

I ran it through an optimiser to get it to work - http://petercollingridge.appspot.com/svg-editor, or maybe morten can run that fancy Sketch command again :)

Is anyone testing this in IE9-11?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1">
  <defs>
    <rect id="path-1" x="2.1" y="2.8" width="10.4" height="10.4"/>
  </defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="feed-icon">
      <rect id="rss-bg-orange" fill="#FF9900" x="0" y="0" width="16" height="16" rx="3"/>
      <mask id="mask-2" fill="white">
        <use xlink:href="#path-1"/>
      </mask>
      <use id="Mask" xlink:href="#path-1"/>
      <g id="3" mask="url(#mask-2)" fill="#FFFFFF">
        <g transform="translate(-8.347826, 2.782609)">
          <path d="M10.4 18.8L10.4 18.8C15 18.8 18.8 15 18.8 10.4 18.8 5.8 15 2.1 10.4 2.1 5.8 2.1 2.1 5.8 2.1 10.4 2.1 15 5.8 18.8 10.4 18.8L10.4 18.8ZM10.4 20.9L10.4 20.9C4.7 20.9 0 16.2 0 10.4 0 4.7 4.7 0 10.4 0 16.2 0 20.9 4.7 20.9 10.4 20.9 16.2 16.2 20.9 10.4 20.9L10.4 20.9ZM10.8 15.5L10.8 15.5C13.4 15.5 15.5 13.4 15.5 10.8 15.5 8.1 13.4 6 10.8 6 8.1 6 6 8.1 6 10.8 6 13.4 8.1 15.5 10.8 15.5L10.8 15.5ZM10.8 17.6L10.8 17.6C7 17.6 3.9 14.5 3.9 10.8 3.9 7 7 3.9 10.8 3.9 14.5 3.9 17.6 7 17.6 10.8 17.6 14.5 14.5 17.6 10.8 17.6L10.8 17.6Z" id="Shape"/>
          <circle id="1" cx="11.7" cy="9.1" r="1.3"/>
        </g>
      </g>
    </g>
  </g>
</svg>

IE9 svg should work OK, afaict on my previous testing the only issue is with scaling, it can get a bit wonky, but I think with viewBox, height and width it "should" be OK.

what Jeff said.
IE9 supports SVG, and if a browser doesn't support SVG, Drupal8 doesn't need to provide fallback, since #2286601: [policy] Drop support for browsers that don't support SVG

Here is a much-reduced SVG, based on the original from feedicons.com.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect fill="#ff9900" width="16" height="16" x="0" y="0" rx="3" ry="3"/>
  <g fill="#ffffff">
    <circle cx="4.25" cy="11.812" r="1.5"/>
    <path d="M10,13.312H7.875c0-2.83-2.295-5.125-5.125-5.125l0,0V6.062C6.754,6.062,10,9.308,10,13.312z"/>
    <path d="M11.5,13.312c0-4.833-3.917-8.75-8.75-8.75V2.375c6.041,0,10.937,4.896,10.937,10.937H11.5z"/>
  </g>
</svg>

working on a patch now.

Screenshots for IE9. Things do look a bit blurry but this could be either because I used browserstack or it could be IE9 SVG rendering.

IE9: Before

IE9: After

#31 one of the earlier icons will work when you paste in the actual SVG code, but used in an image element will not work. Illustrator baulked on some of the sketch icons and mangled them on save as, after running through an optimiser they worked (both in image tag and Illustrator). This was pretty quick and dirty testing, but it did highlight to me that the code matters, a lot, and an image might work in image/embed element, but not another way, etc. The whole SVG thing does my head in a bit but I do have Sketch, Illustrator and Inkscape so I could do some heavy testing and investigations on this, I think you are right that we need some documentation and standards on SVG, even we could have tests for them since they are just code (e.g. has width, height, viewBox attributes).

--

Returning to the scope of this issue

Here is some screenshots, all in IE9. I see in morten's design the white stripes are not totally centered.
I like that jwilson's version is a simplified version, but still respects the shapes of the official logo.

I think, the same way that Drupal 8 will have their JS libraries minified, we should also have our SVG optimized, with all the whitespace removed and sacrifice readability.
It's 14% difference in the weight, in this case:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect fill="#f90" width="16" height="16" rx="3" ry="3"/><g fill="#fff"><circle cx="4.25" cy="11.812" r="1.5"/><path d="M10 13.312h-2.125c0-2.83-2.295-5.125-5.125-5.125v-2.125c4.004 0 7.25 3.246 7.25 7.25zM11.5 13.312c0-4.833-3.917-8.75-8.75-8.75v-2.187c6.041 0 10.937 4.896 10.937 10.937h-2.187z"/></g></svg>

Let me put this RTBC, but mortendk could give his final approval

About the whitespace removal, we can discuss it in the guidelines issue, and apply it to all SVGS later on.. Let's ship this one already.

This will conflict with #2426967: Feed icon should be a CSS background image not a image file. Since that one is more complex, postponing this on that one.

Curious how the weight of the SVG in #42 compares to the existing PNG feed-icon plus bytes of the <img> tag its embedded in.

I found a GPL Feed-icon.svg available from Wikimedia Commons.

Comparing it with Morten's drupalicons feed.svg...

1. The Wikimedia Commons one has a gradient, Morten's doesn't.
2. It has a border style (made from 3 overlapping rects, each slightly smaller).
3. Morten's colours are implemented with masks, Wikimedia Commons uses fill attributes.
4. The Wikimedia SVG source code is shorter.
5. The Wikimedia curved paths in particular use much shorter code.

The first 2 points are just observations - I don't really care whether it's flat design or a gradient ;-)

The remaining points are worth considering, to see how we might we improve our SVG. I don't know what the pros/cons or performance of the mask approach are, but the Wikimedia Commons icon is much shorter source code.

Another comparison point, after the ones in #46.

Morten's drupalicons feed.svg contains <title> and <desc> elements; the Wikimedia Commons icon, and Corbacho's code from #42 do not.

We can use <title> and <desc> elements for accessibility, using aria-labelledby and aria-describedby respectively. I've updated #2433761: [meta] svg guidelines / requirements with more details

If we make use of these SVG elements, they'll need to be localizable.

If we make use of these SVG elements, they'll need to be localizable.

Interesting!

Does that mean our existing SVGs are a problem localization-wise?

@wim Only if the SVG has text elements inside, such as the <title> element.

The aria-labelledby pattern described at #2433761: [meta] svg guidelines / requirements isn't the only way to provide alternative text for an icon. We could still do it as a span.visually-hidden.

Our existing SVG's don't use these elements and I would suggested avoiding them so we don't run into these localisation issues.

Parent issue fixed

using svg in css has issues only IE8 and android 2.3 so we are fine
http://caniuse.com/#search=svg

This looks RTBC to me. Nice how much crisper it looks when it is zoomed in. The old PNG just looked horrible in comparison.

I was thrown off at first by the druplicon.png, but that's I'm guessing we're just switching a reference to another file.

#49: thanks for the info!

#50: agreed!

#55: indeed.

I agree that this is RTBC.

Needs a reroll.

Did the reroll

Tested re-roll.
svg-file is shown.

I think this can go back to rtbc?

Deleting tags.

This is only a front-end change (image and css) and therefore permitted during beta. Committed 457517f and pushed to 8.0.x. Thanks!

Nice one :) Thank you, Morten!

:D good

I'm sooo happy to see this and #2426967 get in! The Themer Experience in D8 is amazing and this small piece is the cherry on top.