SVG Properties

What is an SVG property?

It is a storage for data type which can be primitive, DOM type or SVG type. Example of primitive types are int, float, boolean. Examples for DOM type is DOMString. And examples for SVG types are SVGNumber, SVGNumberList, SVGLength, SVGLengthList, SVGAngle, SVGPoint, SVGPointList.

What is so special about SVG property?

1. It has to provide a DOM interface. The interface can get or set its value similar to getAttribute() and setAttribute() methods.
2. It has to be RefCounted because the DOM object will encapsulate the same SVG property and this DOM object can outlive the owner element.
3. It is a reflection of a DOM attribute. Two cases have to be handled:
   1. When setAttribute() called for the underlaying attribute, SVGElement::parseAttribute() will be called to update the SVG property. Then SVGElement::svgAttributeChanged() is called to invalidate the renderer and the dependent SVG objects.
   2. When the SVG property is changed through the DOM interface. In this handled in two steps:
      • The commit step which is called immediately after changing the property's value. It will mark the value of the underlaying attribute to be invalid and it will call SVGElement::svgAttributeChanged().
      • The synchronize step which happens later when the value of attribute is required. The valueAsString() of the SVG property is set as the attribute value.
4. Most of the properties are animated properties. The animated property has two members baseVal() and the animal(). Each of them are from the same SVG property type. animal() differs from baseVal() only when animating. Otherwise they have to be the same value.
5. The animal() of the animated property is read only; no changes from the DOM is allowed.
6. The SVG property can be attached to an SVGElement or it can be detached.
   • When the property is attached, a change in its value has to be synchronized with the attribute value.
   • When the property is detached, a change in its value has no effect on any other element.
7. Some properties are SVG lists of SVG types, e.g. SVGNumberList and SVGPointList. In addition of having the list itself Refcounted, all the items of this list have to be RefCounted also. The items can outlive the owner list.

SVG Tear-Off objects

The old design of managing the SVG properties relied on storing only the underlaying data in the SVG element. For example, the SVGRectElement was storing an SVGLengthValue for the baseVal of 'x' property. When the property is requested from the DOM a SVGAnimatedLength has to be constructed. Constructing the SVGAnimatedLength happens through creating and caching an animated SVG tear-off object. The animated tear-off object is a RefCounted and it holds two SVGLength objects for the baseVal and the animVal. The SVGLength object is another type of tear-off objects. This design has many flaws:

1. The animated tear off objects are cached in a hash table outside of the SVGElement although it holds a raw pointer to the property raw data in the SVGElement.
2. It was difficult to deal with optional properties, for example the 'stdDeviation' property of SVGFEGaussianBlurElement. This is because the key of hash table is the pair <SVGElement, attributeName>
3. It was difficult to deal with list properties, for example the 'x' property of SVGTextPositioningElement. The individual items of the SVG tear off object holds raw pointers to the raw data items in the SVGElement. It becomes even more difficult when animating. The animVal tear off list owns the values of the items while the baseVal tear off list items hold pointers to the raw data which is held by the SVGElement.

New Design for the SVG properties

The goal of the new design is to make the life cycle of the SVG properties clear. It has to well define the relationship between the property and its owner such that synchronizing the change in the property with the SVGElement becomes straightforward.

• The SVGElement will own the RefCounted animated SVG property with will own the RefCounted SVG properties for the baseVal and the animVal. This eliminate the need to cache animated SVG property outside the SVGElement like what the SVG tear off objects were doing.

Mechanic of the SVG property

1. Define the property registry of the element such that it associate the class with its all superclasses. And define a member of this type. For example the SVGRectElement has this definition and member declartion:

   using PropertyRegistry = SVGPropertyOwnerRegistry<SVGRectElement, SVGGeometryElement, SVGExternalResourcesRequired>;
   PropertyRegistry m_propertyRegistry { *this };
   

2. Override the virtual method propertyRegistry() which will allow the base class SVGElement to perform operations on all the SVG properties of any superclass.

   const SVGPropertyRegistry& propertyRegistry() const final { return m_propertyRegistry; }
   

3. The property of defined in the header file of the SVG element exactly as it is defined in the IDL file. For example, SVGRectElement will have this member

   Ref<SVGAnimatedLength> m_x { SVGAnimatedLength::create(this, LengthModeWidth) };
   

4. The SVGAnimatedLength has two members named m_baseVal and m_animVal. Both of them are of type SVGLength.
5. The property is registered only once in the constructor of the SVG element. This registration will associate the data member with the attribute name. For example the constructor of the SVGRectElement will have this statement:

   PropertyRegistry::registerProperty<SVGNames::xAttr, &SVGRectElement::m_x>();
   

6. This statement calls the override method of SVGPropertyOwnerRegistry

   template<const LazyNeverDestroyed<const QualifiedName>& attributeName, Ref<SVGAnimatedLength> OwnerType::*property>
   static void registerProperty()
   {
       registerProperty(attributeName, SVGAnimatedLengthAccessor<OwnerType>::template singleton<property>());
   }
   

7. This registration associates a pointer to a member of SVGRectElement with the attributeName through the SVGAnimatedLengthAccessor.