<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
</head>
<body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif;">
<div>Hi John,</div>
<div><br>
</div>
<div>Comments from my own experience…</div>
<div><br>
</div>
<div><b>Styling with CSS and default element style attributes</b></div>
<div><br>
</div>
<div>While it may vary in certain browsers (esp older ones), I believe the standard these days is that any CSS styles should override style attributes specified as part of the SVG’s markup (“fill” or “stroke” attribute, etc), but not those specified in a “style”
 attribute.</div>
<div><br>
</div>
<div>Here’s a quick fiddle showing this (the first circle has fill/stroke/etc specified only as attributes and the CSS gets applied, the second has attributes specified in a “style” attribute and these beat the CSS): <a href="https://jsfiddle.net/b183p5dh/4/">https://jsfiddle.net/b183p5dh/4/</a></div>
<div><br>
</div>
<div>So it’s typically safe to set default values for SVG elements as long as they’re only part of the attribute markup, rather than an element “style” attribute (which will cause them to win out over any external CSS). I’m guessing Adobe Illustrator might
 use the “style” attribute approach with what it generates.</div>
<div><br>
</div>
<div><b>Storing inline SVGs for reuse</b></div>
<div><br>
</div>
<div>I think the biggest challenge with storing SVGs separately in Git would be updating them when desired across whatever sites they’re used on. I wonder if looking at approaches like <a href="https://github.com/iconic/SVGInjector">https://github.com/iconic/SVGInjector</a> might
 not be worthwhile, or a preprocessor function for things like the ILDH where we’re generating a static site.</div>
<div><br>
</div>
<div><br>
</div>
<div><br>
</div>
<span id="OLK_SRC_BODY_SECTION">
<div style="font-family:Calibri; font-size:11pt; text-align:left; color:black; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0in; PADDING-LEFT: 0in; PADDING-RIGHT: 0in; BORDER-TOP: #b5c4df 1pt solid; BORDER-RIGHT: medium none; PADDING-TOP: 3pt">
<span style="font-weight:bold">From: </span>fluid-work <<a href="mailto:fluid-work-bounces@lists.idrc.ocad.ca">fluid-work-bounces@lists.idrc.ocad.ca</a>> on behalf of "Hung, Jonathan" <<a href="mailto:jhung@ocadu.ca">jhung@ocadu.ca</a>><br>
<span style="font-weight:bold">Date: </span>Thursday, April 14, 2016 at 4:06 PM<br>
<span style="font-weight:bold">To: </span>Fluid Work <<a href="mailto:fluid-work@fluidproject.org">fluid-work@fluidproject.org</a>><br>
<span style="font-weight:bold">Subject: </span>Re: Is it time to revisit font icons<br>
</div>
<div><br>
</div>
<div><style>body{font-family:Helvetica,Arial;font-size:13px}</style>
<div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
I’m digging up this email thread now that I’ve spent some time using SVGs for the Quality Infrastructure demo.</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
Here are some personal remarks:</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
- being able to style an SVG using CSS is very desirable and convenient. I was able to easily add contrast styling for graphs, logos, and button icons with a few lines of CSS.</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
- if a SVG specifies a default width, height, and colour (which is typical of most SVGs created using Adobe Illustrator), you would not be able to override it with CSS as the default values have higher priority. I had to manually delete the values from the
 <SVG> element in order for custom CSS to work.</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
- positioning and styling SVGs is much more convenient and predictable than with icon fonts.</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
<br>
</div>
<div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">
Bottom line: I really liked using SVGs inline with the HTML. It was easy to style and use.</div>
<div><br>
</div>
<div>Is it a viable strategy to track *.SVG files separately in git, and then copy and past the SVG element into HTML as needed?</div>
<div><br>
</div>
<div>- Jon.</div>
<br>
<div id="bloop_sign_1460662975344843776" class="bloop_sign">
<div style="font-family:helvetica,arial;font-size:13px"><span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: small; line-height: normal; widows: 1;">-- </span><br style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: small; line-height: normal; widows: 1;">
<div class="gmail_signature" style="color: rgb(34, 34, 34); font-family: arial, sans-serif; font-size: small; line-height: normal; widows: 1;">
<p style="font-size: 12.5px;"><b style="font-size: 12.5px;"><span style="font-size: 10pt; font-family: Tahoma, sans-serif;">JONATHAN HUNG</span></b></p>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;">INCLUSIVE DESIGNER, IDRC<u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><u></u> <u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;">T:</span></b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;"> <a value="+14169776000" style="color: rgb(17, 85, 204);">416 977 6000 x3951</a><u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;">F:</span></b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;"> <a value="+14169779844" style="color: rgb(17, 85, 204);">416 977 9844</a><u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;">E:</span></b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;"> <a href="mailto:jhung@ocadu.ca" target="_blank" style="color: blue;">jhung@ocadu.ca</a><u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><u></u> <u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;">OCAD UNIVERSITY</span></b><span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;">Inclusive Design Research Centre<u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;">205 Richmond Street W. 2nd Floor, Toronto, ON, M5V 1V3<u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><u></u> <u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><a href="http://www.ocadu.ca/" target="_blank" style="color: blue;">www.ocadu.ca</a><u></u><u></u></span></p>
</div>
<div style="font-size: 12.5px;">
<p style="margin: 0cm 0cm 0.0001pt; font-size: 12pt; font-family: 'Times New Roman', serif;">
<span style="font-size: 10pt; font-family: Tahoma, sans-serif;"><a href="http://www.idrc.ocad.ca/" target="_blank" style="color: blue;">www.idrc.ocad.ca</a></span></p>
</div>
</div>
</div>
</div>
<br>
<p class="airmail_on">On February 23, 2016 at 1:08:39 PM, Joseph Scheuhammer (<a href="mailto:clown@alum.mit.edu">clown@alum.mit.edu</a>) wrote:</p>
<blockquote type="cite" class="clean_bq"><span>
<div>
<div></div>
<div>Hi Justin, <br>
<br>
I'm not sure if I understand the issue completely, but it made me think <br>
of the new aria graphics roles, specifically, the "graphic-symbol" <br>
role. That is used where a small "icon" symbolizes something else; an <br>
example would be the symbol for a lightbulb in a circuit diagram. <br>
Here's the current proposed spec: <br>
<a href="http://rawgit.com/w3c/aria/master/aria/graphics.html#graphics-symbol">http://rawgit.com/w3c/aria/master/aria/graphics.html#graphics-symbol</a>
<br>
<br>
I don't think this is exactly the same idea as that for font icons, but <br>
it's close. There are other roles in that document for other kinds of <br>
graphics. And, for ARIA 2.0, there are even more, see: <br>
<a href="http://rawgit.com/w3c/aria/master/aria/graphics2.html#role_definitions">http://rawgit.com/w3c/aria/master/aria/graphics2.html#role_definitions</a>
<br>
<br>
Take all with a grain of salt in the sense that these are still in the <br>
proposal stage and will take time for browser/AT uptake. <br>
<br>
-- <br>
;;;;joseph. <br>
<br>
'Die Wahrheit ist Irgendwo da Draußen. Wieder.' <br>
- C. Carter - <br>
<br>
_______________________________________________________ <br>
fluid-work mailing list - <a href="mailto:fluid-work@lists.idrc.ocad.ca">fluid-work@lists.idrc.ocad.ca</a>
<br>
To unsubscribe, change settings or access archives, <br>
see <a href="http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work">http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work</a>
<br>
</div>
</div>
</span></blockquote>
</div>
</div>
</span>
</body>
</html>