SVG Illustrations

Aka: SVG Illustrations

advertisement

II. Precautions: Non-Medical

  1. Not for Medical Care
  2. The author uses several software packages and programming languages to develop FPnotebook content
  3. For convenience, a dozen pages in FPNotebook are dedicated to quick notes on content creation

III. Technique: SVG Creation in Adobe Illustrator

  1. Create and illustration in Adobe Illustrator
    1. Create a new document using the web preset
    2. Found separate documents are easier to manage than art boards
      1. Shared layers are shared between art boards and this adds to complexity
    3. Place objects on well-named layers (layer names become ids in SVG)
      1. Sub-layer names also become ids in SVG, and sublayers will be grouped (g) within the parent layer
      2. For 2 items within a layer, put the top one on the right side for consistent convention (for later selection)
    4. For related images (e.g. slices of the spine and Brain Stem)
      1. Keep the layer names consistent (for CSS and javascript functionality)
      2. Use each prior image as the base file for the next and delete the content/paths but keep the layer names
    5. Reuse styles and colors
      1. Save styles and colors to library so they may be used across documents
  2. Readying for SVG ouput
    1. Resize the artboard (document setup) to include just the image (but without cropping the edges)
    2. Convert text to outlines (ctrl-shift-o)
    3. Convert strokes with non-uniform profiles to outlines
    4. Group objects which will change together (ctrl-g)
  3. Save as SVG
    1. SVG Profile: 1.1
    2. CSS Properties
      1. Choose "Presentation Attributes" if consolidating all svgs into one as a symbols (see below)
      2. Choose "Style Elements" if using as stand-alone image file (includes style section with consolidated css)
  4. Troubleshooting
    1. General Pearls
      1. When trying to identify the problematic elements, surround them with a named group
        1. Named groups are easier to find in the SVG markup
    2. Polygons that fail to appear
      1. Illustrator will output some paths as polygons (if composed of straight lines) when writing to SVG
      2. Polygons are supported in svg, but at first I could not get them to appear
        1. I had not set the css styles for polygons
      3. If you need to stick to paths:
        1. Solution 1
          1. Select object and "Compound Path > Make" (ctrl-8)
        2. Solution 2
          1. Introduce a small curve in paths (e.g. convert point to round joint, then straighten)
          2. Curved paths are not exported as polygons

IV. Technique: SVG Editing Manually

  1. Delete the first 3 lines (above the SVG element tag) that were added by Adobe Illustrator
  2. Manually editing ID names
    1. Give a meaningful "id" name to the containing SVG tag
    2. Add an "id" attribute to unnamed groups that will require later javascript or CSS manipulation
  3. Add a "defs" tag immediately under the SVG starting tag
    1. You may add a style section to defs: (style type="text/css")
    2. You may add a javascript section to defs: (script type="text/javascript")

V. Technique: SVG Editing via code

  1. Convert element IDs to classes
    1. Images cannot have duplicate ID names (e.g. multiple SVGs in the same page with the same IDs)
    2. Naming layers the same for similar SVG documents is the best way for cross compatibility
      1. However illustrator saves the layer names to IDs in SVG
      2. Classes are preferred to IDs in this case as they may be duplicated
    3. Process to convert SVG IDs to Classes
      1. Option 1: Use Node grunt plugin, iconic/grunt-svg-toolkit
        1. Requires phantom.js be installed and in system path
        2. Modify grunt-svg-toolkit/tasks/lib/svg/ids-to-classes.js
          1. Added ",g" to var shapesAndText (unless already added by toolkit author)
      2. Option 2: Create own Node/Gulp Tool
        1. I did this for all the SVG clean-up (see below)
  2. Process to consolidate all svgs as symbols into one file (perform after svg IDs to classes)
    1. Indications
      1. Works for SVG elements that do not need dynamic modifications later (e.g. icons)
      2. However, for interactive SVGs, best to keep these as individual SVGs and avoid consolidating
    2. Use Node grunt plugin, FweinB/grunt-svgstore
      1. Coverts each svg into a symbol, taking only its viewport attribute and setting ID to filename without .svg ext
      2. Places all symbols into a single svg file
      3. Allows for the "use" statement with an xlink-href pointing to the symbol ID (see below)
    3. SvgStore Config options in gruntfile:
      1. Set to true: inheritviewbox, cleanup, cleanupdefs
      2. Choose includedemo if want to see html usage
    4. Include the svg in the html file (with the svg style to display: none)
      1. Either paste the full contents of svg inline into html OR
      2. Use ng-include directive
  3. Process to further customize the svg file
    1. Custom coding options
      1. Javascript (preferred, see below)
      2. XSLT
      3. C# XLinq (or similar in python...)
    2. Reasons for pre-processing SVG (instead of via javascript)
      1. Speed up loading of file
      2. Image css styling may be corrupted if javascript manipulation occurs to soon or too late
      3. Some functionality (e.g. path Titles as tooltips) will only work if added before the SVG loads
    3. Javascript processing via Node
      1. Plug-ins
        1. Gulp
          1. Takes care of the file io, watching, pipeline...
        2. Cheerio (available for node, grunt, gulp)
          1. https://www.npmjs.com/package/gulp-cheerio
          2. JQuery like editing of XML or HTML files (extremely helpful for pre-processing)
        3. Gulp-Replace
          1. Used with regex to remove the first 3 lines of illustrator saved svg
        4. Path (included in node, just need require)
          1. Filename parsing
      2. Custom tasks (pre-process)
        1. Remove unwanted attributes (e.g. SVG height, width)
          1. Could not remove xml:preserve-space (tried multiple methods including xml\\:preserve-space)
          2. Could not remove, but could select it with $(this).find('

            ')

        2. Convert classes to IDs (copied svg-toolkit code from ids-to-classes.js)
        3. Add additional classes based on json data
        4. Add titles to the paths to function as tool tips
        5. Add ID to svg element based on the filename (without path or extension)

VI. Technique: Using SVG in HTML

  1. Option 1: Html Embed
    1. Add the SVG within an embed element (embed src="content/icon2.svg" id="svg")
    2. Some javascript functionality may require that the "embed" element be placed within an "object" element
  2. Option 2: Inline (preferred)
    1. Include the svg in the file (inline or with ng-include in angular)
  3. Option 3: Symbols (with Inline)
    1. Use the inline method above, but load a single svg, with each image as a symbol within the svg element
    2. Embed a "use" element with xlink:href = symbol_ID
      1. Works well for reusable items that do not need later dynamic css (e.g. hover, animate)
      2. However dynamic css will not work with symbols reused with xlink
      3. These elements will still be accessible via javascript

VII. Technique: Using javascript with SVG

  1. Jquery (or jqlite in AngularJs)
    1. "addClass/removeClass" does not work with SVG selector
      1. "attr" works with SVG selector, but substituting attr(item,'') for removeClass removes all element classes
      2. Could use attr to assign a new "data-status=active" attribute, but the attribute css selector does not work well
      3. Add addClass/removeClass to the plain javascript SVGelement (best solution)
        1. http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
        2. Works for single elements (document.querySelector), but not multiple (querySelectorAll)
        3. Use Todd Moto's solution inside for loop, jquery(".class").each function or other iterator (e.g. lodash)
  2. D3.js
    1. Use d3.xml to load the external svg file and add it to an element in the DOM
      1. http://bl.ocks.org/mbostock/1014829
      2. However, the svg embedded styles including media queries do not work
  3. Angular
    1. Use svg as the component template instead of an html file (I prefer this)
      1. Allows SVG to be manipulated with code, css, trigger events, directives (e.g. ngClass)
    2. Use custom Angular Directive (older method, AngularJs)
      1. https://medium.com/@tweededbadger/tutorial-dynamic-data-driven-svg-map-with-angularjs-b112fdec421d
    3. Use ng-include attribute on a div to load the svg
      1. Include filename must be in double AND single quotes "'file.svg'"
      2. This places the svg inline at runtime (allows for access to svg classes, dynamic styling)
      3. Keeps the source files small during development
      4. However, this does not make optimal use of angular

VIII. Resources

  1. SVG Techniques
    1. SVG-News
      1. http://svg-news.com/
    2. CSS-Tricks
      1. https://css-tricks.com/
    3. Smashing Magazine
      1. http://www.smashingmagazine.com/tag/svg/
  2. SVG Utilities
    1. PicSvg Bitmap to SVG Converter
      1. http://picsvg.com/
    2. SvgCircus Looped SVG Animation Creator
      1. http://svgcircus.com/
  3. SVG Tutorials
    1. Brian Treese (2015) SVG Fundamentals, Pluralsight (subscription)
      1. http://www.pluralsight.com/courses/svg-fundamentals
    2. Iam Johnson (2013) Interactive Data Visualization with D3, Pluralsight from Frontend Masters (subscription)
      1. http://www.pluralsight.com/courses/interactive-data-visualization-d3js
  4. SVG Trend Setters
    1. Mike Bostock (D3 Author)
      1. http://bost.ocks.org/mike/
    2. Sara Soueidan
      1. http://sarasoueidan.com/
    3. Chris Coyier
      1. http://chriscoyier.net/
    4. Ian Johnson (d3 data visualization)
      1. http://enja.org/
  5. SVG Javascript Libraries
    1. D3.js Data Visualization Library
      1. http://d3js.org/
    2. SnapSvg Javascript manipulation
      1. http://snapsvg.io/
    3. Vivus.Js line drawing animation
      1. https://maxwellito.github.io/vivus/
    4. JsPlumb SVG connector elements (e.g. schematic diagrams)
      1. http://www.jsplumb.org/demo/flowchart/dom.html

Images: Related links to external sites (from Bing)

These images are a random sampling from a Bing search on the term "SVG Illustrations." Click on the image (or right click) to open the source website in a new browser window. Search Bing for all related images

Related Studies

Related Topics in Medical Informatics

advertisement