Kirabug at 02:31, 10 June 2020

2020-06-10T02:31:23Z

← Older revision		Revision as of 19:31, 9 June 2020
Line 30:		Line 30:
	* [https://weboverhauls.github.io/demos/svg/ Accessible SVG Test Page] on Web Overhauls		* [https://weboverhauls.github.io/demos/svg/ Accessible SVG Test Page] on Web Overhauls
	* [https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ The many ways to change an SVG fill on hover (and when to use them)] by Cassie Evans at CSS-Tricks		* [https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ The many ways to change an SVG fill on hover (and when to use them)] by Cassie Evans at CSS-Tricks
			* [https://css-tricks.com/forums/topic/swapping-out-svg-icons-problems-with-mobile-safari/ CSS Tricks forum post about SVG images] on [[CSS-Tricks]] discusses a mobile Safari bug that prevents style="display: none" from working on SVGs so using <svg width="0" height="0"> on an SVG containing a symbol is the better bet.

Kirabug: Created page with "Category: Design The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography. == Pros and Cons == === Pros === * Images are V..."

2019-02-11T20:59:30Z

Created page with "Category: Design The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography. == Pros and Cons == === Pros === * Images are V..."

New page

[[Category: Design]]
The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography.

== Pros and Cons ==

=== Pros ===

* Images are [[Vector Images| vector format]] so they are crisp and clean at any size.
* They can be loaded as xml text files, and presented inline in HTML.
* Because they use standard CSS to color the elements of the graphic, they are able to be changed without changing the shape file itself - via Javascript or CSS.
* CSS hover states can be embedded directly into the SVG file.
* Editing can be done with a text editor or a code editor.
* SVG files can also be loaded as <nowiki><img></nowiki> images and recognized by all browsers.
* SVGs allow for <nowiki><title> and <description></nowiki> elements to be embedded within the images themselves, which simplifies accessibility.
* SVGs have a <nowiki><symbol></nowiki> element for embedding multiple symbols into a single SVG file and cleanly referencing those symbols throughout the rest of the page.

===Cons===

* Some very old browsers don't recognize SVG files and may not be sure what to do with them. Fallbacks need to be investigated.

==Additional resources about SVGs==
* [https://www.perpendicularangel.com/2017/04/an-event-apart-seattle-2017-10-things-you-can-and-should-do-with-svg-by-chris-coyier/ anne's conference notes] from An Event Apart Seattle 2017, where Chris Coyier gave a talk entitled 10 Things You Can And Should Do with SVGs.
* [https://jakearchibald.github.io/svgomg/ SVGOMG] is a web-tool to help minify your SVG files. Make sure the toggles for removing <title> and <desc> aren't on!
* [https://www.sitepoint.com/tips-accessible-svg/ Tips for Creating Accessible SVG] by Léonie Watson on Sitepoint
* [https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ Using ARIA to enhance SVG Accessibility] by The Paciello Group
* [https://css-tricks.com/cascading-svg-fill-color/ Cascading SVG Fill Color] by Chris Coyier - explains how to use currentColor as the fill color to pick up the current font color.
* [https://www.sarasoueidan.com/blog/icon-fonts-to-svg/ Making the Switch Away from Icon Fonts to SVG] by Sara Soueidan
* [https://valhead.com/2017/01/18/illustrators-svg-export-settings-explained/ Illustrator's Export SVG Settings Explained] by Val Head
* [https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ Styling SVG <use> Content with CSS] by Sara Soueidan at Codrops explains how the Shadow DOM is used to manage SVG elements that are in an icon set.
* [https://weboverhauls.github.io/demos/svg/ Accessible SVG Test Page] on Web Overhauls
* [https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ The many ways to change an SVG fill on hover (and when to use them)] by Cassie Evans at CSS-Tricks

SVGs - Revision history

Kirabug at 02:31, 10 June 2020

Kirabug: Created page with "Category: Design The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography. == Pros and Cons == === Pros === * Images are V..."