Class PShapeSVG

java.lang.Object
processing.core.PShape
processing.core.PShapeSVG
All Implemented Interfaces:
PConstants
Direct Known Subclasses:
PShapeJava2D, PShapeSVG.Font, PShapeSVG.FontGlyph, PShapeSVG.Gradient, PShapeSVG.LineOfText, PShapeSVG.Text

public class PShapeSVG extends PShape
This class is not part of the Processing API and should not be used directly. Instead, use loadShape() and methods like it, which will make use of this class. Using this class directly will cause your code to break when combined with future versions of Processing.

SVG stands for Scalable Vector Graphics, a portable graphics format. It is a vector format so it allows for "infinite" resolution and relatively small file sizes. Most modern media software can view SVG files, including Adobe products, Firefox, etc. Illustrator and Inkscape can edit SVG files. View the SVG specification here.

We have no intention of turning this into a full-featured SVG library. The goal of this project is a basic shape importer that originally was small enough to be included with applets, meaning that its download size should be in the neighborhood of 25-30 Kb. Though we're far less limited nowadays on size constraints, we remain extremely limited in terms of time, and do not have volunteers who are available to maintain a larger SVG library.

For more sophisticated import/export, consider the Batik library from the Apache Software Foundation.

Batik is used in the SVG Export library in Processing 3, however using it for full SVG import is still a considerable amount of work. Wiring it to Java2D wouldn't be too bad, but using it with OpenGL, JavaFX, and features like begin/endRecord() and begin/endRaw() would be considerable effort.

Future improvements to this library may focus on this properly supporting a specific subset of SVG, for instance the simpler SVG profiles known as SVG Tiny or Basic, although we still would not support the interactivity options.


A minimal example program using SVG: (assuming a working moo.svg is in your data folder)

 PShape moo;

 void setup() {
   size(400, 400);
   moo = loadShape("moo.svg");
 }
 void draw() {
   background(255);
   shape(moo, mouseX, mouseY);
 }
 
  • Field Details

    • opacity

      protected float opacity
    • svgWidth

      protected float svgWidth
      Width of containing SVG (used for percentages).
    • svgHeight

      protected float svgHeight
      Height of containing SVG (used for percentages).
    • svgSizeXY

      protected float svgSizeXY
      √((w² + h²)/2) of containing SVG (used for percentages).
    • strokeGradient

      protected PShapeSVG.Gradient strokeGradient
    • fillGradient

      protected PShapeSVG.Gradient fillGradient
    • colorNames

      protected static IntDict colorNames
      Deliberately conforms to the HTML 4.01 color spec + en-gb grey, rather than the (unlikely to be useful) entire 147-color system used in SVG.
  • Constructor Details

    • PShapeSVG

      public PShapeSVG(XML svg)
      Initializes a new SVG object from the given XML object.
    • PShapeSVG

      protected PShapeSVG(PShapeSVG parent, XML properties, boolean parseKids)
  • Method Details

    • setParent

      protected void setParent(PShapeSVG parent)
    • createShape

      protected PShapeSVG createShape(PShapeSVG parent, XML properties, boolean parseKids)
      Factory method for subclasses.
    • parseChildren

      protected void parseChildren(XML graphics)
    • parseChild

      protected PShape parseChild(XML elem)
      Parse a child XML element. Override this method to add parsing for more SVG elements.
    • parseLine

      protected void parseLine()
    • parseEllipse

      protected void parseEllipse(boolean circle)
      Handles parsing ellipse and circle tags.
      Parameters:
      circle - true if this is a circle and not an ellipse
    • parseRect

      protected void parseRect()
      Parse element. Syntax defined at https://www.w3.org/TR/SVG11/shapes.html#RectElement
    • parseImage

      protected void parseImage()
    • parsePoly

      protected void parsePoly(boolean close)
      Parse a polyline or polygon from an SVG file. Syntax defined at http://www.w3.org/TR/SVG/shapes.html#PointsBNF
      Parameters:
      close - true if shape is closed (polygon), false if not (polyline)
    • parsePath

      protected void parsePath()
    • parseTransform

      protected static PMatrix2D parseTransform(String matrixStr)
      Parse the specified SVG matrix into a PMatrix2D. Note that PMatrix2D is rotated relative to the SVG definition, so parameters are rearranged here. More about the transformation matrices in this section of the SVG documentation.
      Parameters:
      matrixStr - text of the matrix param.
      Returns:
      a good old-fashioned PMatrix2D
    • parseSingleTransform

      protected static PMatrix2D parseSingleTransform(String matrixStr)
    • parseColors

      protected void parseColors(XML properties)
    • setColor

      public void setColor(String colorText, boolean isFill)
    • parseSimpleColor

      protected static int parseSimpleColor(String colorText)
      Parses the "color" datatype only, and prints an error if it is not of this form. http://www.w3.org/TR/SVG/types.html#DataTypeColor
      Returns:
      0xRRGGBB (no alpha). Zero on error.
    • parseRGB

      protected static int parseRGB(String what)
    • parseStyleAttributes

      protected static StringDict parseStyleAttributes(String style)
    • getFloatWithUnit

      protected static float getFloatWithUnit(XML element, String attribute, float relativeTo)
      Used in place of element.getFloatAttribute(a) because we can have a unit suffix (length or coordinate).
      Parameters:
      element - what to parse
      attribute - name of the attribute to get
      relativeTo - (float) Used for %. When relative to viewbox, should be svgWidth for horizontal dimentions, svgHeight for vertical, and svgXYSize for anything else.
      Returns:
      unit-parsed version of the data
    • parseUnitSize

      protected static float parseUnitSize(String text, float relativeTo)
      Parse a size that may have a suffix for its units. This assumes 90dpi, which implies, as given in the units spec:
      • "1pt" equals "1.25px" (and therefore 1.25 user units)
      • "1pc" equals "15px" (and therefore 15 user units)
      • "1mm" would be "3.543307px" (3.543307 user units)
      • "1cm" equals "35.43307px" (and therefore 35.43307 user units)
      • "1in" equals "90px" (and therefore 90 user units)
      Parameters:
      relativeTo - (float) Used for %. When relative to viewbox, should be svgWidth for horizontal dimentions, svgHeight for vertical, and svgXYSize for anything else.
    • parseFloatOrPercent

      protected static float parseFloatOrPercent(String text)
    • createFont

      protected static PFont createFont(String name, int weight, float size, boolean smooth)
    • getChild

      public PShape getChild(String name)
      Get a particular element based on its SVG ID. When editing SVG by hand, this is the id="" tag on any SVG element. When editing from Illustrator, these IDs can be edited by expanding the layers palette. The names used in the layers palette, both for the layers or the shapes and groups beneath them can be used here.
       // This code grabs "Layer 3" and the shapes beneath it.
       PShape layer3 = svg.getChild("Layer 3");
       
      Overrides:
      getChild in class PShape
      Parameters:
      name - the name of the shape to get
    • print

      public void print()
      Prints out the SVG document. Useful for parsing.