Hiding the entire <svg>

Web Export Feature Request
1

I would like to be able to hide, with a class, the entire <svg></svg> not just the <rect></rect>.

I am using the Rectangle Tool in XD to create placeholder images. Exporting will add a class to the <rect> but not the entire <svg>. I need to hide the entire element so I don’t have keep deleting it from the code.

2

When I export a Rectangle I get this code:

<svg class="Rectangle_1">
	<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="90" height="63">
	</rect>
</svg>

And this CSS:

body {
	margin: 0;
	padding: 0;
}
:root {
	--web-view-ids: iPhone_X_XS___1;
}
#Artboard1 * {
	margin: 0;
	padding: 0;
}
#Rectangle_1 {
	opacity: 1;
	fill: rgba(217,217,217,1);
}
.Rectangle_1 {
	position: absolute;
	overflow: visible;
	width: 90px;
	height: 63px;
	left: 23px;
	top: 24px;
}

Can you set display to none in .Rectangle_1?

.Rectangle_1 {
	position: absolute;
	overflow: visible;
	width: 90px;
	height: 63px;
	left: 23px;
	top: 24px;
	display: none;
}
3

I am replacing all the the exported CSS in the template with the CSS I need in order to use the Unsematic grid.

I delete the <!--styles_content--> and replace it with mine.
So those CSS classes are no longer there. I want to be able to add the grid’s classes “hide-on-desktop hide-on-tablet hide-on-mobile”

4

If I understand it correctly, you want to add an Unsemantic Grid to the page but you want to provide all of the HTML and all of the CSS? So the only thing you want Web Export to do is it to place the HTML and CSS in the place of the rectangle?

5

I’ve attached the html file that gets exported so you can see what I’m taking about.

You’ll see in the HTML what I have replaced ad added in the Template. The Unsemantic classes I am trying to add on the svg, are being added to the rect instead.

You’ll also see the other Unsemantic classes that make up the grid.

main.html.zip (1.7 KB)

6

OK. Thank you for the example. That makes sense. When Web Export exports objects from XD some of those are exported as a single component while others are exported as multiple components or composite components.

Composite components, like the Rectangle are not directly mapped to a single rect tag:

<rect x=10 y=10/>

but are instead mapped to a SVG container that contains the rect tag inside

<svg class="Rectangle_1">
 <rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="90" height="63">
 </rect>
</svg>

So the additionalClasses are being applied to the Rect tag inside of the SVG tag. This is everything you said at the start. :slight_smile:

So like the tagName and the subTagName issue I think to solve this there should be additionalClasses and subClasses properties that would apply to composite components.

In the mean time you might also be able to use a non composite component, set the class on that and then set the markupInside property. Or possibly use the new display property of the object. See if either of those work better. There is an example here on the markupInside feature.

I’ll see if I can put an example together with Unsemantic. Examples are great and have been a source of new features and finding existing bugs so keep them coming. :slight_smile:

1 Like