25 Matching Annotations
  1. Sep 2020
  2. Jul 2020
    1. How you set up your artwork in Illustrator will affect the resulting SVG file. Keep in mind the following guidelines: Use layers to add structure to an SVG file. When you save artwork in SVG format, each layer is converted to a group (<g>) element. (For example, a layer named Button1 becomes <g id="Button1_ver3.0"> in the SVG file.) Nested layers become SVG nested groups, and hidden layers are preserved with the display="none" SVG styling property. If you want objects on different layers to appear transparent, adjust the opacity of each object instead of each layer. If you alter opacity at the layer level, the resulting SVG file will not display transparency as it appears in Illustrator. Raster data is not scalable in the SVG Viewer and cannot be edited like other SVG elements. If possible, avoid creating artwork that will be rasterized in the SVG file. Gradient meshes and objects that use the Rasterize, Artistic, Blur, Brush Strokes, Distort, Pixelate, Sharpen, Sketch, Stylize, Texture, and Video effects are rasterized when saved in SVG format. Similarly, graphic styles that include these effects also produce rasterization. Use SVG effects to add graphic effects without causing rasterization. Use symbols and simplify the paths in your artwork to improve SVG performance. Also avoid using brushes that produce a lot of path data, such as the Charcoal, Fire Ash, and Scroll Pen, if performance is a high priority.Use slices, image maps, and scripts to add web links to an SVG file. A scripting language, such as JavaScript, opens unlimited functionality to an SVG file. Pointer and keyboard movements can invoke scripting functions such as rollover effects. Scripts can also use the document object model (DOM) to access and modify the SVG file—inserting or deleting SVG elements, for example.
    1. One way around this is simply linking to each SVG with an <img> tag, instead of embedding the actual SVG in the DOM. This way, the virtual DOM only needs to track one node per image, instead of hundreds for each SVG. Inline SVG [above] vs linked SVG. But in doing so we’ve crippled our ability to manipulate our SVGs. No longer can we add stroke, move shapes, remove nodes or change fill. In short, if you want :hover to change the fill color, you’re back in the stone age.
    2. One problem—not a fatal one, but still an issue with any virtual DOM—is that embedding SVGs directly into your app can be a resource hog. No matter how much you compress, no matter how logical and streamlined your components, if you need to load up hundreds of very-complex SVGs, React will need to track all of their nodes, and updating them becomes a chore.
    1. You know the trade-off. Use the img tag to display an SVG, and you get clean markup — at the cost of styling the SVG using its properties like fill, stroke, SVG filters and more.
  3. May 2020
  4. Apr 2020
  5. Mar 2020
    1. Inkscape is professional, free, open source Vector Graphics software.
    2. A tutorial of transforming any photo to a line art vector using Inkscape. Line art is easy to create with the help of Bazier Tool from Inkscape, Bazier Curves are precise in tracing and easy to work with. It is similar to the Pen Tool option of Illustrator.
  6. Dec 2019
  7. Oct 2018
  8. 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)">
  9. Mar 2017
  10. Jan 2016
  11. 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.

  12. 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!

  13. 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.