Elements and Sub Elements

Elements and sub elements

Web Export creates code from the elements in your artboard. Usually the code is one or two blocks.

A Ellipse in an artboard becomes an SVG Ellipse.

In the Ellipse above there are two tags that are used, the svg tag and the ellipse tag: 

<svg class="Ellipse_2">
	<ellipse fill="rgba(189,90,234,1)" stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Ellipse_2" rx="50" ry="50" cx="50" cy="50">
	</ellipse>
</svg>

Some elements are one tag: 

<div id="Artboard___1">

</div>

In the Element options view some fields have two fields next to each other. For example, there is a Styles field and a Sub Styles field.

The first field is used to set the styles on the first tag and the second field is to set the styles on the second tag.

If we select an Ellipse element then the SVG tag will be styled by the first field and the ellipse tag will be styled by second field.

When an element is only a single tag, like the Artboard or a group (container) only the first field applies. Setting the sub field does nothing.

You can see the effects when we add a class to an element and add a class to the sub element:

Before:

After:

PreviousModifying Individual ElementsNextStyling elements

Last updated