Participant

Question

Help defining SVG classes in Illustrator

Forum|Forum|6 years ago
December 16, 2019
2 replies
979 views

Hello, I am having a website built which includes an online layout tool or "builder". The builder combines various design controls, and one of them is the ability to add and change logo fill colors and outline (stroke) thicknesses and colors *separately* and in real time. I have provided my developer with SVG logos exported from Illustrator, but he says that they are not usable because they do not have any classes defined that specifically identify the "BODY" and "OUTLINE" elements of the logo.

He has, however, been able to do this on text/fonts added inside the builder.

That said, can anyone provide guidance on how or where to apply classes in Illustrator that would allow this? I have tried various things with Graphic Styles in Illustrator, but I can't seem to get them to flow through to the SVG code.

This seems like it should be fairly straightforward and I'm not sure why two classes are required. I thought fill and stroke elements could be added to SVG groups, but maybe it's not that easy and they can't be changed dynamically and in real time?

Many thanks in advance -- this is an important part of the app, so I really appreciate any guidance here that will make it work!

--Jim.

This topic has been closed for replies.

ensel

Participating Frequently

Hi feckman,

I tried a bit (for own purposes too) and came to following solution (which will not work in at least Internet Explorer 11 due it´s awkward svg-implementation):

You will need a javascript-File, a css-File and some modification of your svg-File.

In my example the structure of files is the following:
index.html
css/styles.css
js/script.js
images/drumart.svg

-------------------------
Code of Index.html:
-------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible"
    content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1">
  <link href="css/styles.css"
    rel="stylesheet">
</head>
<body>
  <div class="SVG-Container">
    <object type="image/svg+xml"
      data="images/drumart.svg"
      class="svg-object">
      DrumArt.com
    </object>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

-------------------------
Code of styles.css:
-------------------------

.SVG-Container{
    background-color: grey;
    display: inline-block;
    position: relative;
}
.svg-object{
    width: 400px;
}
#DrumArtLayer path{
    fill: red;
    stroke: none; 
    stroke-linecap: square; 
    stroke-linejoin: miter; 
    stroke-width: 1;
} 
#DrumArtLayer.modified path{
    fill: yellow;
    stroke: blue; 
    stroke-linecap: square; 
    stroke-linejoin: miter; 
    stroke-width: 5;
}
#DrumArtLayer.modified:hover path{
    fill: orange;
    stroke: green;
}

-------------------------
Code of script.js:
-------------------------

var drumartlayer = document.getElementById('DrumArtLayer');
drumartlayer.addEventListener("click", changeStyles); 
function changeStyles(event){
  drumartlayer.classList.add("modified");
}

-------------------------
Modification of drumart.svg:
-------------------------
- Since the svg will be styled via the css-file you dont´t need the style tag in the svg, you can remove it.
- Replace the id "Layer_1" in the svg-Tag with a unique an more specific ID like id="DrumArtLayer"
- between the svg-Tag an the Tag <g id="Stroke"> place the following:

<defs>
<style type="text/css">@import url("../css/styles.css");</style>
<script xlink:href="../js/script.js" language="JavaScript"></script>
</defs>

these are the references to the javascript and the css-file which need to be adressed inside the svg-file.

If you start your index.html in the browser you should see your logo with a red fill and no strokes on a grey background.
A click on the logo adds the class "modified" to the svg-Tag in the svg-code which changes the fills to yellow and adds a blue stroke.
Moving the mouse over the logo adds the hover-styles (orange and green).

You can easily add your own IDs (should be unique) and classes and modify the corresponding styles.

Hope this helps... (at least it helped me) 🙂

Perhaps somebody else has an idea to get it work with older Internet Explorers?

Monika Gause

Community Expert

You can set up a lot of things inside Illustrator (also strokes applied to a group), but that doesn't necessarily transfer to the SVG.

I assume you have tried out the different export options for styles to SVG?

And also you use Export for screens (which creates the most modern SVG code)?

You might need to edit this stuff in Inkscape, where you can do advanced editing in the styles, which then is also applied to the code. SVG is Inkscape's native file format. With Illustrator this is not the case.

Can you show code samples of what you need compared to what you get?

feckmanAuthor

Participant

Here is an SVG of my company logo. In it, I have two classes (.BODY and .OUTLINE) and two groups (FILL and STROKE) containing duplicate versions of the logo. I am trying to apply the .BODY class to everything in the FILL group and the .OUTLINE class to everything in the STROKE group to make a red logo with a black outline.

Rather than filling one red and outlining the other black, I get two duplicate logos -- one filled black and one filled red on top of each other -- with no outlines at all. I have very limited experience with XML and CSS so I'm sure I am doing something entirely wrong. Any ideas?

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 576 576" style="enable-background:new 0 0 576 576;" xml:space="preserve">
<style type="text/css">
	.OUTLINE {fill:"none" stroke:#000000 stroke-linecap="square" stroke-linejoin="miter" stroke-alignment="outer" stroke-width="1";}
	.BODY {fill:#FF0000;}
</style>
<g id="Stroke">
	<path class="OUTLINE" d="M200.3,226.1c2.9,0.1,7.2,0.6,11.6,1.2c-2.4,1-3.7,1.8-3.6,2.4c0.4,2.6,9.3,2.2,9.3,2.2s2.5-0.8,6.8-2.2
		c4.2,1.1,5.8,2.3,1.5,2.8c-9.3,1.3-11.4,1.1-11.8,1c0.9,0.2,11.8,2.7,15.6,0.9c2.3-1.1,3.7-3.9,0.6-6.6c11.9-3.7,31-9.7,52.6-16.3
		c1.8-0.6,3.6-1.1,5.3-1.6c2.4,0.8,5,1.7,7.7,2.6c23.8,8,44.5,15.2,55.5,19.1c-3.2,2.7-1.7,5.5,0.7,6.6c3.8,1.8,14.6-0.7,15.5-1
		c-0.4,0.1-2.5,0.3-11.9-0.9c-4.3-0.6-2.8-1.6,1.2-2.8c1.8,0.6,2.8,1,2.8,1s9.1,0.5,9.8-2.1c0.1-0.4-0.3-0.8-1.1-1.4
		c4.7-0.8,9.5-1.3,12.6-1.4c9.9-0.3-4.6,6.2,28.4,9.8c0,0-0.2-0.1-0.4-0.2c97.7,33.4,134.2,76.4,134,72.7c-0.2-3.7,12-10-21.6-30.4
		c-30.2-18.4-100-38.9-113.8-42.9c-2.4-1.1-6.6-3-10.3-5.1c-5.5-3.1-14.7-9.7-32.7-6.7c-1.4,0.2-2.7,0.5-3.9,0.8
		c-9.6-3.4-26.3-8.1-46-12.8c-8.2-2-15.9-4-22.9-6c32.8-9.8,40.6-10.6,51.2-11.4c11.5-0.9,2.3-9.4-10.2-4c-9.2,4-24.5,9.2-44.5,14.4
		c-18.4-5.4-32.4-10.7-40.8-14.8c-12.1-5.8-22.7,2.7-11,3.9c10.4,1.1,18.2,2,48.2,11.8c-6.4,1.6-13.1,3.2-20.3,4.7
		c-17.6,3.8-32.9,7.5-43,10.5c-1.4-0.3-2.8-0.6-4.4-0.9c-18.1-3-27.1,3.6-32.5,6.8s-12,6-12,6C205.1,232.3,190.4,225.8,200.3,226.1z
		"/>
	<path class="OUTLINE" d="M142.8,311.8c-20.6-11.6-31.7-13-31.7-13c5.8,4.8,18.6,21.1,18.6,21.1c33.6-5.4,78.3-9.4,78.3-9.4
		C188.8,309.3,142.8,311.8,142.8,311.8z"/>
	<path class="OUTLINE" d="M216.8,238.6c0,0,0.5-2.6-9.6-2.7c-8.6-0.1-21.7,4.2-25.5,5.6c-0.2,0-22.1,2.9-39.8,17.5c-22.8,18.8-37,40.5-79.4,49.2
		c0,0,45.4-6.4,69-27.3s28.6-33.9,50.2-39.4c-0.7,0.2-1.1,0.4-1.1,0.4s7.8-2.8,20.7-3.6C214,237.5,216.8,238.6,216.8,238.6z"/>
	<path class="OUTLINE" d="M172.2,236.1c0,0-83.7,22.5-118.3,42.7s-22.7,26.6-23.1,30.3C30.5,312.8,70,269,172.2,236.1z"/>
	<path class="OUTLINE" d="M428.5,259c-15.1-12-32.9-16-38.6-17c-5.1-1.3-10.9-2.4-15.4-2.4c-10.1,0.2-9.5,2.8-9.5,2.8s2.7-1.1,15.6-0.4
		c5.7,0.3,10.5,1,14,1.7c16.6,6.3,23.4,18.6,45.1,37.1c24.4,20.8,70,26.9,70,26.9C466.9,299.2,452,277.6,428.5,259z"/>
	<path class="OUTLINE" d="M344.5,272.8c0,0-10.1-32.5-58.2-38.3s-71.7,44.1-54,81.8c0,0-6.8-31.3,12.7-54c0,0,9.3,27.9,43,45.9
		c0,0-13.5-12.8-18.6-29.6c0,0,32.1,21.5,60.8,29.6c0,0-21.9-12.8-29.5-24.4c0,0,16,14.5,52.3,20.9c0,0-55.7-36.6-65.8-59.2
		C287.1,245.5,331,252.5,344.5,272.8z"/>
	<path class="OUTLINE" d="M441.2,322.5c0,0,14.1-16.2,20.3-20.9c0,0-11.3,1.3-32.8,12.6c0,0-45.8-3-65-2.1C363.7,312.1,408.1,316.6,441.2,322.5z"/>
	<g id="text">
		<path class="OUTLINE" d="M32.3,405.3v-78.7h23.5c5.1,0,9.7,1.3,13.6,3.8s6,6.5,6,11.7v47.6c0,4.9-1.9,8.7-5.6,11.4c-3.7,2.7-8.4,4.1-13.9,4.1H32.3
			V405.3z M56.4,391v-50.2c0-2.8-1.8-4.1-5.4-4.1v58.5C54.6,395.2,56.4,393.8,56.4,391z"/>
		<path class="OUTLINE" d="M119.3,368h-17v-13.8c0-1.9-1-2.9-2.9-2.9s-2.9,0.9-2.9,2.8v51.3h-17v-63.7h17v2.1c2.3-1.7,5.8-2.6,10.5-2.6
			c3.4,0,6.3,0.8,8.7,2.5s3.6,3.9,3.6,6.6L119.3,368L119.3,368z"/>
		<path class="OUTLINE" d="M162.3,405.3h-17v-2.1c-2.2,2-5.7,3-10.5,3c-3.4,0-6.3-0.8-8.7-2.4s-3.7-3.8-3.7-6.4v-55.8h17v51.8c0,1.9,1,2.9,3,2.9
			c1.9,0,2.9-0.9,2.9-2.8v-51.9h17V405.3L162.3,405.3z"/>
		<path class="OUTLINE" d="M228.9,405.3h-17v-50.9c0-1.9-1-2.9-2.9-2.9c-2,0-2.9,0.9-2.9,2.8v51h-17v-51c0-1.9-1-2.9-2.9-2.9c-2,0-2.9,0.9-2.9,2.8
			v51.1h-17v-63.7h17v2.3c2.4-1.8,5.9-2.7,10.6-2.7c3.9,0,7.5,1.5,10.7,4.3c3-2.9,7.1-4.3,12.2-4.3c2.9,0,5.7,0.8,8.3,2.4
			s3.9,3.9,3.9,6.8L228.9,405.3L228.9,405.3z"/>
		<path class="OUTLINE" d="M283.7,405.3h-18.6l-3.2-21.1h-8.3l-3.2,21.1h-18.6l14.1-78.7h23.8L283.7,405.3z M260.4,373.2l-2.7-23.5l-2.6,23.5H260.4z
			"/>
		<path class="OUTLINE" d="M333.1,405.4h-18.8c-2-2.2-3-8.6-3-19v-0.1l0.1-4.7c0.1-6.5,0.2-9.9,0.2-10c0-2.7-2-4-5.9-4v37.8h-18.8v-78.7h23.2
			c5.3,0,9.9,1.1,13.8,3.4c3.9,2.2,5.9,5.8,5.9,10.6v9.4c0,6.1-3.9,10.2-11.6,12.4c7.8,1.7,11.7,6,11.7,13l-0.3,8.6
			C329.6,396.6,330.7,403.7,333.1,405.4z M311.5,353.8v-13c0-2.8-1.9-4.1-5.8-4.1V358C309.5,358,311.5,356.6,311.5,353.8z"/>
		<path class="OUTLINE" d="M374.8,336.8h-10.5v68.4h-18.8v-68.4H335v-10.3h39.8V336.8z"/>
		<path class="OUTLINE" d="M393.5,405.3H378v-11.5h15.5V405.3z"/>
		<path class="OUTLINE" d="M436.8,369.8h-17v-15.6c0-2.1-1-3.1-2.9-3.1c-2,0-2.9,1-2.9,3.1v39c0,2.2,1,3.2,2.9,3.2s2.9-1.1,2.9-3.2v-15.4h17v15.5
			c0,8.6-6.5,12.9-19.6,12.9c-13.4,0-20.2-4.5-20.2-13.4v-38.1c0-9,6.7-13.4,20.2-13.4c13.1,0,19.6,4.3,19.6,12.9V369.8z"/>
		<path class="OUTLINE" d="M440.2,392.7v-38.1c0-9,6.7-13.4,20.2-13.4c5.2,0,9.8,1,13.8,3.1s5.9,5.3,5.9,9.8v39.2c0,8.6-6.6,12.9-19.7,12.9
			C446.9,406.1,440.2,401.7,440.2,392.7z M463.1,393.1v-39c0-2.1-1-3.1-2.9-3.1c-2,0-3,1-3,3.1v39c0,2.2,1,3.2,3,3.2
			C462.1,396.4,463.1,395.3,463.1,393.1z"/>
		<path class="OUTLINE" d="M546.4,405.3h-17v-50.9c0-1.9-1-2.9-2.9-2.9c-2,0-3,0.9-3,2.8v51h-17v-51c0-1.9-1-2.9-2.9-2.9c-2,0-3,0.9-3,2.8v51.1h-17
			v-63.7h17v2.3c2.4-1.8,5.9-2.7,10.6-2.7c3.9,0,7.5,1.5,10.7,4.3c3-2.9,7.1-4.3,12.2-4.3c2.9,0,5.7,0.8,8.3,2.4s3.9,3.9,3.9,6.8
			L546.4,405.3L546.4,405.3z"/>
	</g>
</g>
<g id="Fill">
	<path class="BODY" d="M200.3,226.1c2.9,0.1,7.2,0.6,11.6,1.2c-2.4,1-3.7,1.8-3.6,2.4c0.4,2.6,9.3,2.2,9.3,2.2s2.5-0.8,6.8-2.2
		c4.2,1.1,5.8,2.3,1.5,2.8c-9.3,1.3-11.4,1.1-11.8,1c0.9,0.2,11.8,2.7,15.6,0.9c2.3-1.1,3.7-3.9,0.6-6.6c11.9-3.7,31-9.7,52.6-16.3
		c1.8-0.6,3.6-1.1,5.3-1.6c2.4,0.8,5,1.7,7.7,2.6c23.8,8,44.5,15.2,55.5,19.1c-3.2,2.7-1.7,5.5,0.7,6.6c3.8,1.8,14.6-0.7,15.5-1
		c-0.4,0.1-2.5,0.3-11.9-0.9c-4.3-0.6-2.8-1.6,1.2-2.8c1.8,0.6,2.8,1,2.8,1s9.1,0.5,9.8-2.1c0.1-0.4-0.3-0.8-1.1-1.4
		c4.7-0.8,9.5-1.3,12.6-1.4c9.9-0.3-4.6,6.2,28.4,9.8c0,0-0.2-0.1-0.4-0.2c97.7,33.4,134.2,76.4,134,72.7c-0.2-3.7,12-10-21.6-30.4
		c-30.2-18.4-100-38.9-113.8-42.9c-2.4-1.1-6.6-3-10.3-5.1c-5.5-3.1-14.7-9.7-32.7-6.7c-1.4,0.2-2.7,0.5-3.9,0.8
		c-9.6-3.4-26.3-8.1-46-12.8c-8.2-2-15.9-4-22.9-6c32.8-9.8,40.6-10.6,51.2-11.4c11.5-0.9,2.3-9.4-10.2-4c-9.2,4-24.5,9.2-44.5,14.4
		c-18.4-5.4-32.4-10.7-40.8-14.8c-12.1-5.8-22.7,2.7-11,3.9c10.4,1.1,18.2,2,48.2,11.8c-6.4,1.6-13.1,3.2-20.3,4.7
		c-17.6,3.8-32.9,7.5-43,10.5c-1.4-0.3-2.8-0.6-4.4-0.9c-18.1-3-27.1,3.6-32.5,6.8s-12,6-12,6C205.1,232.3,190.4,225.8,200.3,226.1z
		"/>
	<path class="BODY" d="M142.8,311.8c-20.6-11.6-31.7-13-31.7-13c5.8,4.8,18.6,21.1,18.6,21.1c33.6-5.4,78.3-9.4,78.3-9.4
		C188.8,309.3,142.8,311.8,142.8,311.8z"/>
	<path class="BODY" d="M216.8,238.6c0,0,0.5-2.6-9.6-2.7c-8.6-0.1-21.7,4.2-25.5,5.6c-0.2,0-22.1,2.9-39.8,17.5c-22.8,18.8-37,40.5-79.4,49.2
		c0,0,45.4-6.4,69-27.3s28.6-33.9,50.2-39.4c-0.7,0.2-1.1,0.4-1.1,0.4s7.8-2.8,20.7-3.6C214,237.5,216.8,238.6,216.8,238.6z"/>
	<path class="BODY" d="M172.2,236.1c0,0-83.7,22.5-118.3,42.7s-22.7,26.6-23.1,30.3C30.5,312.8,70,269,172.2,236.1z"/>
	<path class="BODY" d="M428.5,259c-15.1-12-32.9-16-38.6-17c-5.1-1.3-10.9-2.4-15.4-2.4c-10.1,0.2-9.5,2.8-9.5,2.8s2.7-1.1,15.6-0.4
		c5.7,0.3,10.5,1,14,1.7c16.6,6.3,23.4,18.6,45.1,37.1c24.4,20.8,70,26.9,70,26.9C466.9,299.2,452,277.6,428.5,259z"/>
	<path class="BODY" d="M344.5,272.8c0,0-10.1-32.5-58.2-38.3s-71.7,44.1-54,81.8c0,0-6.8-31.3,12.7-54c0,0,9.3,27.9,43,45.9
		c0,0-13.5-12.8-18.6-29.6c0,0,32.1,21.5,60.8,29.6c0,0-21.9-12.8-29.5-24.4c0,0,16,14.5,52.3,20.9c0,0-55.7-36.6-65.8-59.2
		C287.1,245.5,331,252.5,344.5,272.8z"/>
	<path class="BODY" d="M441.2,322.5c0,0,14.1-16.2,20.3-20.9c0,0-11.3,1.3-32.8,12.6c0,0-45.8-3-65-2.1C363.7,312.1,408.1,316.6,441.2,322.5z"/>
	<g id="text">
		<path class="BODY" d="M32.3,405.3v-78.7h23.5c5.1,0,9.7,1.3,13.6,3.8s6,6.5,6,11.7v47.6c0,4.9-1.9,8.7-5.6,11.4c-3.7,2.7-8.4,4.1-13.9,4.1H32.3
			V405.3z M56.4,391v-50.2c0-2.8-1.8-4.1-5.4-4.1v58.5C54.6,395.2,56.4,393.8,56.4,391z"/>
		<path class="BODY" d="M119.3,368h-17v-13.8c0-1.9-1-2.9-2.9-2.9s-2.9,0.9-2.9,2.8v51.3h-17v-63.7h17v2.1c2.3-1.7,5.8-2.6,10.5-2.6
			c3.4,0,6.3,0.8,8.7,2.5s3.6,3.9,3.6,6.6L119.3,368L119.3,368z"/>
		<path class="BODY" d="M162.3,405.3h-17v-2.1c-2.2,2-5.7,3-10.5,3c-3.4,0-6.3-0.8-8.7-2.4s-3.7-3.8-3.7-6.4v-55.8h17v51.8c0,1.9,1,2.9,3,2.9
			c1.9,0,2.9-0.9,2.9-2.8v-51.9h17V405.3L162.3,405.3z"/>
		<path class="BODY" d="M228.9,405.3h-17v-50.9c0-1.9-1-2.9-2.9-2.9c-2,0-2.9,0.9-2.9,2.8v51h-17v-51c0-1.9-1-2.9-2.9-2.9c-2,0-2.9,0.9-2.9,2.8
			v51.1h-17v-63.7h17v2.3c2.4-1.8,5.9-2.7,10.6-2.7c3.9,0,7.5,1.5,10.7,4.3c3-2.9,7.1-4.3,12.2-4.3c2.9,0,5.7,0.8,8.3,2.4
			s3.9,3.9,3.9,6.8L228.9,405.3L228.9,405.3z"/>
		<path class="BODY" d="M283.7,405.3h-18.6l-3.2-21.1h-8.3l-3.2,21.1h-18.6l14.1-78.7h23.8L283.7,405.3z M260.4,373.2l-2.7-23.5l-2.6,23.5H260.4z
			"/>
		<path class="BODY" d="M333.1,405.4h-18.8c-2-2.2-3-8.6-3-19v-0.1l0.1-4.7c0.1-6.5,0.2-9.9,0.2-10c0-2.7-2-4-5.9-4v37.8h-18.8v-78.7h23.2
			c5.3,0,9.9,1.1,13.8,3.4c3.9,2.2,5.9,5.8,5.9,10.6v9.4c0,6.1-3.9,10.2-11.6,12.4c7.8,1.7,11.7,6,11.7,13l-0.3,8.6
			C329.6,396.6,330.7,403.7,333.1,405.4z M311.5,353.8v-13c0-2.8-1.9-4.1-5.8-4.1V358C309.5,358,311.5,356.6,311.5,353.8z"/>
		<path class="BODY" d="M374.8,336.8h-10.5v68.4h-18.8v-68.4H335v-10.3h39.8V336.8z"/>
		<path class="BODY" d="M393.5,405.3H378v-11.5h15.5V405.3z"/>
		<path class="BODY" d="M436.8,369.8h-17v-15.6c0-2.1-1-3.1-2.9-3.1c-2,0-2.9,1-2.9,3.1v39c0,2.2,1,3.2,2.9,3.2s2.9-1.1,2.9-3.2v-15.4h17v15.5
			c0,8.6-6.5,12.9-19.6,12.9c-13.4,0-20.2-4.5-20.2-13.4v-38.1c0-9,6.7-13.4,20.2-13.4c13.1,0,19.6,4.3,19.6,12.9V369.8z"/>
		<path class="BODY" d="M440.2,392.7v-38.1c0-9,6.7-13.4,20.2-13.4c5.2,0,9.8,1,13.8,3.1s5.9,5.3,5.9,9.8v39.2c0,8.6-6.6,12.9-19.7,12.9
			C446.9,406.1,440.2,401.7,440.2,392.7z M463.1,393.1v-39c0-2.1-1-3.1-2.9-3.1c-2,0-3,1-3,3.1v39c0,2.2,1,3.2,3,3.2
			C462.1,396.4,463.1,395.3,463.1,393.1z"/>
		<path class="BODY" d="M546.4,405.3h-17v-50.9c0-1.9-1-2.9-2.9-2.9c-2,0-3,0.9-3,2.8v51h-17v-51c0-1.9-1-2.9-2.9-2.9c-2,0-3,0.9-3,2.8v51.1h-17
			v-63.7h17v2.3c2.4-1.8,5.9-2.7,10.6-2.7c3.9,0,7.5,1.5,10.7,4.3c3-2.9,7.1-4.3,12.2-4.3c2.9,0,5.7,0.8,8.3,2.4s3.9,3.9,3.9,6.8
			L546.4,405.3L546.4,405.3z"/>
	</g>
</g>
</svg>

Monika Gause

Community Expert

It's a syntax isue. The CSS needs to be defined like this:

<style type="text/css">
	.OUTLINE {fill: none; stroke: black; stroke-linecap: square; stroke-linejoin: miter; stroke-alignment: outer; stroke-width: 1;}
	.BODY {fill: red;}
</style>

I have code this in a text editor. Illustrator an read it, Inkscape can read it as well. But exporting it out of Illustrator will change the styles and their names.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded