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.

Ellipse on the artboard

HTML (SVG) code of the ellipse

Ellipse that is recreated in the browser from the HTML page

HTML in the browser

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.

Ellipse code

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:

HTML: Creating the content - Learn web development | MDNMDN Web Docs

Your first website - Learn web development | MDNMDN Web Docs

SVG: Scalable Vector Graphics | MDNMDN Web Docs