Comments (4)
I actually really like the idea of SVG moving forward. It would be nice to experiment with CSS stylings on SVG to help modernize our branding, such as changing the colour of a particular SVG graphic.
Does anyone know of any accessibility downsides to using SVG? I don't know of any at the moment, but I have heard some chatter about there being pros and cons to using SVGs versus font icons.
Could we perhaps experiment with SVG moving forward? Why not follow agile and try to experiment and fail quickly, instead of not trying something new that could add to the branding experience?
from tds-core.
We had a couple of jam sessions about using SVGs vs. an icon font, and key take-a-ways were:
- Caching the icons as an external asset is desirable, for caching
- Using an SVG from an external sprite was fixed in IE Edge, but Thorium supports IE 11.
- Inlining SVGs is commonly abstracted with server-side helper functions, but Thorium Core is limited to the browser.
- An icon font is easier to maintain for cross functional teams with both dev & design contributors
- An icon font could be used for a limited, core set of functional icons like what's currently provided, and SVG might be leveraged later, for a larger library of extraneous/decorative icons.
Thoughts?
from tds-core.
I'd have to agree with those takeaways. I think IE 11 sets it as a reason to wait at the moment.
I would like to see dev and design contributors work together with SVGs and see what issues they run into. I think you're right that icons are easier to maintain in cross-functional teams. I wonder if one of the reasons that it is easier to maintain is less diverse design considerations are used as a result of using icons. That is my only concern. It could hinder creativity in design. I'll let the designers be the judge of that, however, as they are more aware of how SVGs are being used for regularly in creative design. It may not really apply to our design considerations at this moment though.
I'll continue to think about this issue. I have noticed that we do not commonly use SVGs, although I hear people raving about them. Thanks for bringing it up!
from tds-core.
I'm not sure what our current icon font workflow looks like, but the ones I've typically seen involve a designer creating (or finding) an svg, giving that to the devs, then the devs have to add it to the icon font, commit the updated font, etc...ultimately, there's a bit of a process to work with an icon font, mitigated by the various tools out there.
SVGs are the same story, but I'd argue they're even a little easier to handle, partially because an svg file is something any designer or dev can easily open and inspect; can't say the same of a compiled icon font .otf or .woff. We'd need to find a good workflow, but fortunately, many people have already done the legwork on that. They've also laid out a bunch of reasons why this is worth doing:
https://github.com/blog/2112-delivering-octicons-with-svg
http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
https://css-tricks.com/icon-fonts-vs-svg/
from tds-core.
Related Issues (20)
- ChainAlert: npm package release (2.1.3) has no matching tag in this repo
- ChainAlert: npm package release (2.1.3) has no matching tag in this repo
- ChainAlert: npm package release (2.3.3) has no matching tag in this repo
- ChainAlert: npm package release (2.1.3) has no matching tag in this repo
- ChainAlert: npm package release (2.2.3) has no matching tag in this repo
- ChainAlert: npm package release (2.4.3) has no matching tag in this repo
- ChainAlert: npm package release (2.1.3) has no matching tag in this repo
- Broken links on tds.telus.com/design/principles.html HOT 1
- Difficult to re-open the DatePicker Overlay HOT 4
- LWC Migration - Umbrella Icon HOT 3
- LWC Migration - Apple watch
- LWC Migration - Automatic fall detection
- LWC Migration - 2-way voice call
- LWC Migration - Battery and Health Icon HOT 2
- Modal Icon HOT 1
- Links in the documentation are not working
- Countdown timer options for both hero banners + tiles for the HP Redesign in SB 2.0 HOT 1
- Yellow Ticker Banner - Text Contrast
- Add VideoCall Icon
- Add LeakDetect Icon
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tds-core.