Create a getting started / best practice guide

[FWeinb]

The workflow improvements discussed in #16 have an impact on the usage of grunt-svgstore so I would like to update/create a getting started and best practice guide.

If implementing the proposed idea from #1 the user will have to use css like:

.svg-sprite{
  width:0;
  height:0;
  visibility:hidden;
}

instead of the current display:none; to hide the svg sprite to keep linearGradient working.

[FWeinb]

Things to do:

• link to @chriscoyier svg-sprites article (maybe ask him update it to reflect the changes made here)
• record a usage video
• write down best practices

[chriscoyier]

I'm down to fix up all my article and stuff. Just waiting for all this to shake out. The big things I need to understand fully and then update:

• Account for "how to use SVG's with different viewBox's"
• Account for update to <symbol> stuff
• Account for not hiding with display none

Anything else?

[FWeinb]

Great @chriscoyier thanks for taking the time to update your articles.

Just to clear things up. The <symbol> element is used instead of a (<g> element) because it allows us to put the viewBox attribute of the original svg on it so there is no need to fiddle with the viewBox attribute in the <use> block anymore. You can also merge svgs with multiple different viewBoxs without any problem.

To support gradient elements like linearGradient we can no longer use display:none; in the svg sprite because that would result in a unrendert gradient (demo pen) I don't know if this an implementation bug of Webkit or intended by the spec, whatsoever we have to life with it now.
To make it work we need to hide the SVG sprite but don't remove it from the render tree using visibility:hidden; and setting the width and height to 0. I don't know how big the performance hit is but can't imagine it to but that big (I asked paul but he is obviously quite busy these days)

I hope I could cover everything you need to know.

[judewang]

Hello, I just read the article of using SVG use with External Source. But I found that because of symbol element is used, the SVG use can not be using with external source, I have to include all the svg codes into the html.
Do you know how to fix this problem? Thanks.

[FWeinb]

Thanks @judewang for reporting this. <symbol> is working as an external source (see this plunk) keep in mind that you have to host the ressource on the same origin (port, domain and protocol must match)

The only things that aren't working using external referencing are gradients and the viewBox attribute, which must be added again.

[chriscoyier]

I wrote this up so there is a good reference to why the <symbol> stuff is better: http://css-tricks.com/svg-symbol-good-choice-icons/

[FWeinb]

Great @chriscoyier. But there is one mistake. The title and desc attribute you are using are wrong. These informations have to be added as separated elements like this:

<symbol id="icon1"  
         viewBox="original-file's-viewBox" >
  <title>"original-file's-title"</title> 
  <desc>"original-file's-desc"</desc>

  [paths]

</symbol>

spec

The comment of TxHawks is wrong on this

[chriscoyier]

Got it, thx

[maxisix]

Nice one i really like ! What do you think about creating the gulpJS plugin ;)

[FWeinb]

@maxisix There is https://github.com/w0rm/gulp-svgstore by @w0rm

[maxisix]

@FWeinb Fuck yeah ! You rock dude ! ;)

[w0rm]

@FWeinb Thanks for mentioning my plugin here, I added link back to yours in the readme.
@maxisix If you encounter any bugs or need a feature, feel free to open an issue.

[maxisix]

Sure ill try this today !