Some SVG Basics

Things To Remember

Links:

What I'm Trying to Build

I'm trying to create an SVG editor where users can create SVGs with animations in an area about 300px wide and 300px tall.
I want it to be intuitive - so far, I have had trouble figuring out how to create good, animated SVGs using the editors that are out there right now.

I want it to be lightweight so that users can create interesting designs that do not have a significant negative impact on page performance.

I will be making this SVG editor using PixiJS.
The editor should output a single <svg> tag that contains one or more of the following tags:

  • <circle>
  • <ellipse>
  • <rect>
  • <line>
  • <polyline>
  • <polygon>
  • <path>

The SVG editor could be able to implement AI in the future - i.e. by generating paths from the outlines of objects in images and the like.

Each of the elements listed above should be able to use the <animate>, <animateTransform>, <animate>, and <animateMotion> elements.

I haven't figured out yet how I will implement gradients. The user may be able to create gradients near the bottom of the page, and then select from those gradients for the fill / line color of an element.

Learning Basics of SVGs

Creating SVGs

For Reference for Tables Below:

Value Types:

length
For SVG-specific properties defined in SVG1.1 and their corresponding presentation attributes, the unit identifiers in values are optional. If not provided, the length value represents a distance in the current user coordinate system. Length identifiers must be in lower case when used in presentation attributes for all properties whether they are defined in SVG or in CSS. This case sensitivity is relaxed in SVG2 to align with CSS.
length ::= <number> (<absolute-length> | <relative-length>)?
percentage
Percentages are specified as a number followed by a "%" character:
    percentage ::= number "%"
number
When used in an SVG attribute, a number is defined differently, to allow numbers with large magnitudes to be specified more concisely: 
    number ::= integer ([Ee] integer)?
    | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
auto

Circles

Circles
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
cx The x-axis coordinate of the center of the circle. length | percentage yes yes
cy The y-axis coordinate of the center of the circle. length | percentage yes yes
r The radius of the circle. A value lower or equal to zero disables rendering of the circle. length | percentage yes yes
pathLength The total length for the circle's circumference, in user units number yes no

Rectangles

Rectangles
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
x The x coordinate of the rect. length | percentage yes yes
y The y coordinate of the rect. length | percentage yes yes
width The width of the rect. auto | length | percentage yes yes
height The height of the rect. auto | length | percentage yes yes
rx The horizontal corner radius of the rect. auto | length | percentage yes yes
ry The vertical corner radius of the rect. number auto | length | percentage yes
pathLength The total length of the rectangle's perimeter, in user units number yes no

Ellipse

Ellipses
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
cx The x position of the center of the ellipse. length | percentage yes yes
cy The y position of the center of the ellipse. length | percentage yes yes
rx The radius of the ellipse on the x axis. auto | length | percentage yes yes
ry The radius of the ellipse on the y axis. auto | length | percentage yes yes
pathLength This attribute lets specify the total length for the path, in user units number no yes

Line

Lines
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
x1 Defines the x-axis coordinate of the line starting point. length | percentage | number yes no
x2 Defines the x-axis coordinate of the line ending point. length | percentage | number yes no
y1 Defines the y-axis coordinate of the line starting point. length | percentage | number yes no
y2 Defines the y-axis coordinate of the line ending point. length | percentage | number yes no
pathLength Defines the total path length in user units. number yes no

Polyline

Polylines
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
points This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline. number yes no
pathLength This attribute lets specify the total length for the path, in user units. number yes no

Polygon

Polygon
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
points This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. number yes no
pathLength This attribute lets specify the total length for the path, in user units. number yes no

Path

Path
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
d This attribute defines the shape of the path. string yes no
pathLength This attribute lets specify the total length for the path, in user units. number yes no

Text

Text
Attribute: Attrbiute Description: Value Type: Animatable: Can Use CSS:
x The x coordinate of the starting point of the text baseline length | percentage yes no
y The y coordinate of the starting point of the text baseline. length | percentage yes no
dx Shifts the text position horizontally from a previous text element. length | percentage yes no
dy Shifts the text position vertically from a previous text element. length | percentage yes no
rotate Rotates orientation of each individual glyph. list-of-number yes no
lengthAdjust How the text is stretched or compressed to fit the width defined by the textLength attribute. spacing|spacingAndGlyphs yes no
textLength A width that the text should be scaled to fit. length | percentage yes no
My cat is Grumpy!

Presentation Attributes

Presentation Attributes
Attribute Name: Description: Value: Animateable: Circle: Rectangle: Ellipse: Line: Polyline: Polygon: Path: Text:
alignment-baseline It specifies how an object is aligned along the font baseline with respect to its parent. Value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit ; Animatable: Yes
baseline-shift It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. Value: auto|baseline|super|sub|||inherit ; Animatable: Yes
clip Deprecated It defines what portion of an element is visible. Value: auto||inherit ; Animatable: Yes
clip-path It binds the element it is applied to with a given element. Value: none||inherit ; Animatable: Yes
clip-rule It indicates how to determine what side of a path is inside a shape in order to know how a should clip its target. Value: nonzero|evenodd|inherit ; Animatable: Yes
color It provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. Value: |inherit ; Animatable: Yes
color-interpolation It specifies the color space for gradient interpolations, color animations, and alpha compositing. Value: auto|sRGB|linearRGB|inherit ; Animatable: Yes
color-interpolation-filters It specifies the color space for imaging operations performed via filter effects. Value: auto|sRGB|linearRGB|inherit ; Animatable: Yes
color-profile Deprecated It defines which color profile a raster image included through the element should use. Value: auto|sRGB|linearRGB|||inherit ; Animatable: Yes
color-rendering It provides a hint to the browser about how to optimize its color interpolation and compositing operations. Value: auto|optimizeSpeed|optimizeQuality|inherit ; Animatable: Yes
cursor It specifies the mouse cursor displayed when the mouse pointer is over an element. Value: ||inherit ; Animatable: Yes
d It defines a path to be drawn. Value: path()|non e
direction It specifies the base writing direction of text. Value: ltr|rtl|inherit ; Animatable: Yes
display It allows to control the rendering of graphical or container elements. Value: see CSS display ; Animatable: Yes
dominant-baseline It defines the baseline used to align the box's text and inline-level contents. Value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top ; Animatable: Yes
enable-background Deprecated It tells the browser how to manage the accumulation of the background image. Value: accumulate|new|inherit ; Animatable: No
fill It defines the color of the inside of the graphical element it applies to. Value: ; Animatable: Yes
fill-opacity It specifies the opacity of the color or the content the current object is filled with. Value: | ; Animatable: Yes
fill-rule It indicates how to determine what side of a path is inside a shape. Value: nonzero|evenodd|inherit ; Animatable: Yes
filter It defines the filter effects defined by the element that shall be applied to its element. Value: |none|inherit ; Animatable: Yes
flood-color It indicates what color to use to flood the current filter primitive subregion defined through the or element. Value: ; Animatable: Yes
flood-opacity It indicates the opacity value to use across the current filter primitive subregion defined through the or element. Value: | ; Animatable: Yes
font-family It indicates which font family will be used to render the text of the element. Value: see CSS font-family ; Animatable: Yes
font-size It specifies the size of the font. Value: see CSS font-size ; Animatable: Yes
font-size-adjust It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters. Value: |none|inherit ; Animatable: Yes
font-stretch It selects a normal, condensed, or expanded face from a font. Value: see CSS font-stretch ; Animatable: Yes
font-style It specifies whether a font should be styled with a normal, italic, or oblique face from its font-family. Value: normal|italic|oblique ; Animatable: Yes
font-variant It specifies whether a font should be used with some of their variation such as small caps or ligatures. Value: see CSS font-variant ; Animatable: Yes
font-weight It specifies the weight (or boldness) of the font. Value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900 ; Animatable: Yes
glyph-orientation-horizontal Deprecated It controls glyph orientation when the inline-progression-direction is horizontal. Value: |inherit ; Animatable: No
glyph-orientation-vertical Deprecated It controls glyph orientation when the inline-progression-direction is vertical. Value: auto||inherit ; Animatable: No
image-rendering It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. Value: auto|optimizeQuality|optimizeSpeed ; Animatable: Yes
kerning Deprecated It indicates whether the browser should adjust inter-glyph spacing. Value: auto||inherit ; Animatable: Yes
letter-spacing It controls spacing between text characters. Value: normal||inherit ; Animatable: Yes
lighting-color It defines the color of the light source for filter primitives elements and . Value: ; Animatable: Yes
marker-end It defines the arrowhead or polymarker that will be drawn at the final vertex of the given element or basic shape. Value: |none|inherit ; Animatable: Yes
marker-mid It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given element or basic shape. Value: |none|inherit ; Animatable: Yes
marker-start It defines the arrowhead or polymarker that will be drawn at the first vertex of the given element or basic shape. Value: |none|inherit ; Animatable: Yes
mask It alters the visibility of an element by either masking or clipping the image at specific points. Value: see CSS mask ; Animatable: Yes
opacity It specifies the transparency of an object or a group of objects. Value: ; Animatable: Yes
overflow Specifies whether the content of a block-level element is clipped when it overflows the element's box. Value: visible|hidden|scroll|auto|inherit ; Animatable: Yes
pointer-events Defines whether or when an element may be the target of a mouse event. Value: bounding-box|visiblePainted|visibleFill|visibleStroke|visible |painted|fill|stroke|all|none ; Animatable: Yes
shape-rendering Hints about what tradeoffs to make as the browser renders element or basic shapes. Value: auto|optimizeSpeed|crispEdges|geometricPrecision |inherit ; Animatable: Yes
solid-color - Value: ; Animatable: -
solid-opacity - Value: ; Animatable: -
stop-color Indicates what color to use at that gradient stop. Value: currentcolor|||inherit ; Animatable: Yes
stop-opacity Defines the opacity of a given gradient stop. Value: |inherit ; Animatable: Yes
stroke Defines the color used to paint the outline of the shape. Value: ; Animatable: Yes
stroke-dasharray Defines the pattern of dashes and gaps used to paint the outline of the shape. Value: none| ; Animatable: Yes
stroke-dashoffset Defines an offset on the rendering of the associated dash array. Value: | ; Animatable: Yes
stroke-linecap Defines the shape to be used at the end of open subpaths when they are stroked. Value: butt|round|square ; Animatable: Yes
stroke-linejoin Defines the shape to be used at the corners of paths when they are stroked. Value: arcs|bevel|miter|miter-clip|round ; Animatable: Yes
stroke-miterlimit Defines a limit on the ratio of the miter length to the stroke-width used to draw a miter join. Value: ; Animatable: Yes
stroke-opacity Defines the opacity of the stroke of a shape. Value: | ; Animatable: Yes
stroke-width Defines the width of the stroke to be applied to the shape. Value: | ; Animatable: Yes
text-anchor Defines the vertical alignment a string of text. Value: start|middle|end|inherit ; Animatable: Yes
text-decoration Sets the appearance of decorative lines on text. Value: none|underline|overline|line-through|blink|inherit ; Animatable: Yes
text-rendering Hints about what tradeoffs to make as the browser renders text. Value: auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit ; Animatable: Yes
transform Defines a list of transform definitions that are applied to an element and the element's children. Value: ; Animatable: Yes
unicode-bidi - Value: ; Animatable: -
vector-effect Specifies the vector effect to use when drawing an object. Value: default|non-scaling-stroke|inherit| ; Animatable: Yes
visibility Lets you control the visibility of graphical elements. Value: visible|hidden|collapse|inherit ; Animatable: Yes
word-spacing Specifies spacing behavior between words. Value: |inherit ; Animatable: Yes
writing-mode Specifies whether the initial inline-progression-direction for a element shall be left-to-right, right-to-left, or top-to-bottom. Value: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit ; Animatable: Yes