61 Matching Annotations
  1. Nov 2023
  2. Jul 2023
  3. Apr 2023
  4. Dec 2022
  5. Nov 2022
    1. SVG 1.1 (a W3C Recommendation): The altglyph element provides detailled control over the glyphs used to render particular character data.
  6. Oct 2022
  7. May 2022
    1. To select an element tag or attribute defined in a specific namespace, you declare a namespace prefix with an @namespace rule, then use it in your selector. The namespace is separated from the tag name with a | (vertical bar or pipe) character; if there is no tag name in the selector, use a universal * selector:

      ```css @namespace svg "http://www.w3.org/2000/svg";

      a { / These rules would apply to any a elements. / text-decoration: underline; color: purple; } svg|a { / These rules would apply to SVG a elements, but not HTML links. / stroke: purple; } svg| { / These rules apply to all SVG-namespaced elements, but not HTML elements. */ mix-blend-mode: multiply; } ```

  8. Apr 2022
    1. Using SVG as a component

      SVGs can be imported and used directly as a React component in your React code. The image is not loaded as a separate file, instead, it’s rendered along the HTML. A sample use-case would look like this:

      ```js import React from 'react'; import {ReactComponent as ReactLogo} from './logo.svg';

      const App = () => { return ( <div className="App"> <ReactLogo /> </div> ); } export default App; ```

      Note this approach only works with create-react-app

  9. Mar 2022
  10. Feb 2022
    1. Gerben and Brendan Howell created PenPub which connects with a Moleskine/Neo smartpen via bluetooth, turns the lines into an SVG file, uploads that to a static web server, and thereby creates a ‘paper website’ that is a live reflection of your notebook (with a few seconds delay)

      syndicated copy

  11. Jan 2022
  12. Dec 2021
  13. Oct 2021
    1. Adobe announced the final release Adobe SVG Viewer 3.0 for Windows 98/ME/NT/2000/XP and MacOS 8.x/9.x/10.1. It is available in 15 languages. Compared to version 2.0 more elements, attributes, CSS properties and DOM methods from the SVG 1.0 specification are supported. There is also an internal script engine.

      Adobe SVG Viewer was discontinued January 1, 2009 Adobe - Adobe to Discontinue Adobe SVG Viewer

    2. release of Amaya 4.0 with support for editing mixed-namespace XHTML, SVG and MathML documents.

      Amaya New Features History mentions new SVG features.

    3. Michael Bierman announced French, German, and Japanese localizations of the Adobe SVG viewer. All localisations are available at either the US or Japanese sites.

      According to Wikipedia - Adobe Illustrator Adobe SVG Viewer was introduced in 2000.

    4. FOP, an XSL Formatting Objects to PDF converrter, now has a "tiny bit of SVG support" according to it's author, James Tauber. It generates XSL FO output, with embedded SVG, and renders this all to PDF taking advantage of the pluggable element handlers for rendering the SVG portion. See example PDF slides made from XM· source (including SVG) using XSL-T and FOP.

      FOP mentioned

  14. Sep 2021
    1. For SVG I recommend starting with this short but sweet SVG primer by Scott Murray. Play around with manually creating SVG elements and seeing how they work. Use a tool like BlockBuilder to quickly get started without setting up any kind of development environment. You may want to refer to the MDN reference site for SVG. Once you’ve mastered the basics, check out SVG beyond mere shapes by Nadieh Bremer.

      Getting started with SVG

  15. May 2021
    1. /* referencing path from an inline SVG */ clip-path: url(#c1);

      first sighting: referencing image by ID in CSS

  16. Apr 2021
    1. I LOVE the hover effects for the book covers on this site which is also a great example of someone collecting highlights/annotations of the books they read and hosting them in public on their personal website.

      Melanie has written about the CSS part of the hover effect here: https://melanie-richards.com/blog/highlights-minisite/ and like all awesome things, she's got the site open at https://github.com/melanierichards/highlights. I may have to do some serious digging for figuring out how she's creating the .svg images for the covers though.

  17. Feb 2021
  18. Jan 2021
    1. All in all, building icon systems with SVG isn’t that hard! If you have the right tools available, it can be a pretty easy switch. The benefits of SVG sprites have been discussed at length, and the consensus in the web community is that SVG icon systems come out on top when compared with iconic fonts.
  19. Nov 2020
    1. SVG has the advantage that integrates very well with Svelte, since it’s an XML and the nodes can be managed as if they were HTML. On the other hand, Canvas is more efficient, but it has to be generated entirely with JavaScript.
  20. Sep 2020
  21. 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.
  22. May 2020
  23. Apr 2020
  24. 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.
  25. Dec 2019
  26. Oct 2018
  27. 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)">
  28. Mar 2017
  29. Jan 2016
  30. 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.

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

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