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:
Last modified 3yr ago