10 Matching Annotations
  1. Oct 2018
  2. Sep 2018
    1. We use svg from font-awesome 5 in our tabs. You can add them in your assets folder and reference them directly <ion-tab icon="/assets/font-awesome/light/bars.svg" label="{{managementTabTitle}}" href="/tabs/tab/(management:management)">
  3. Mar 2017
  4. Jan 2016
  5. Nov 2015
    1. Firefox and Chrome exhibit different behaviors when trying to style elements that appear inside a <use> block. In Firefox 45, a .use-element-class .sub-element-class selector will style the element as expected. In Chrome it won't because this is trying to cross a DOM boundary (that is, the SVG content and the <use> element are in different DOMs). This article has useful background to this and approaches to use.

    1. Strong arguments for abandoning icon fonts in favor of SVG icons, with plenty of links to supporting material.<br> Tyler Sticka

      Font Awesome is an SVG and CSS icon library designed for Bootstrap.

  6. Sep 2015
    1. Useful history of icon authoring techniques on the web and in particular icon fonts vs SVGs

    1. cool-looking map

      Maps make a great case for SVG. There are some neat libraries and tools to play with SVG maps but, more importantly, maps make it easy to understand that an image can be semantic.

      A couple of weeks before Shepazu posted this, was playing with SVG maps of contemporary Africa’s political boundaries. (Especially those used on Wikipedia; including some which separate South Sudan.) Been teaching African Studies (on occasion) for years, and maps of the continent tend to become important quite quickly.

      Those SVG maps with which I started playing were pretty neat in several respects. The fact that they were vector drawings instead of bitmaps meant that they easily be resized without causing visual artifacts. More importantly, though, each country was drawn as a named outline, so it was possible to play with them as separate objects.

      One thing I was trying to do is create an animation which would show where each country fits in a region of the continent, using this United Nations geoscheme. Doing so, eventually noticed that Sudan and South Sudan had been classified as part of different regions, which is an interesting tidbit which could lead to useful classroom discussions.

      Haven’t retraced all the steps but, at some point, I’ve used a Public Domain map of Africa from Wikimedia Commons (itself based on another Public Domain map), and ended up creating a simple animated version using Tumult’s Hype commercial HTML5 editor.

      It’s flawed in many ways, but for someone with almost no background in this things, it’s a significant accomplishment.

      (Surely, the same could be done through SVG itself. Haven’t been able to learn how to do so.)

      Playing with those maps taught me quite a few things. For instance, the benefits of a well-tagged image. And some rudimentary notions of CSS-based animations. Or the limitations linked to selecting rectangular sections of an image (with a large overlap between Northern and Western Africa, for instance).

      Static Map of African Regions The experience also gave me all sorts of ideas. Such as annotating parts of a well-structured image. Or uses for Open Street Maps. Or ways to embed interactive content (including quizzes) in Open Textbooks.

      The key point, perhaps, and what led me to Schepers’s work (including this deeply insightful SVG-based presentation and interactive infographic about annotations) is that Open Standards can open up fascinating opportunities for learning.

      W3C Annotation Architecture proposal So nice to be working at a standards-happy learning technology non-profit!

  7. Apr 2015
    1. Note that you can reference any SVG element inside the xlink:href attribute, even if that element is in an external file. The referenced element or group does not have to exist in the same file. This is great for organizing files (for example you could have a file for reusable components) and for caching the used files.