SVG CSS Colors style

[PPFF]

I'm Elia graphic designer. It's a pleasure to be here with you. I've a big question. I need to do an animate svg. Actually i use Adobe CC Animate with a plugin. This is the code:

    <svg xmlns="http://www.w3.org/2000/svg" width="550" height="400" baseProfile="basic" image-rendering="optimizeSpeed"> <g overflow="visible"> <path fill="#3C3C3B" d="M39.8 0H0v2.25h39.8V0z"/> <path fill="#898989" d="M2.2 2.25v15.9l4.7 3.6v55.9h30.65V2.25H2.2z"/> <path fill="#FFEC00" d="M26.25 21.2H17.5v4.5h8.75v-4.5z"/> <path fill="#3C3C3B" d="M38.3 36.15H19.35v3.2H38.3v-3.2zM31.6 41.95H19.4v3.15h12.2v-3.15zM39.4 46.8H4.3V49h35.1v-2.2z"/> <path fill="#575756" d="M17.85 70.95q1.8 1.8 4.4 1.8 2.55 0 4.4-1.8 1.8-1.85 1.8-4.4 0-2.6-1.8-4.4-1.85-1.8-4.4-1.8-2.6 0-4.4 1.85-1.85 1.8-1.8 4.35 0 2.6 1.8 4.4zM83.75 74v3.65H4.35V74H2.2v3.65h1.05v13.9H85v-13.9h1V74h-2.25z"/> <path fill="#575756" d="M75.1 72H52.55v4.2H75.1V72z"/> <path fill="#3C3C3B" d="M79.35 76.15H46.4v1.55h32.95v-1.55zM78.55 60.45q0-6.1-4.3-10.45-4.35-4.3-10.45-4.3T53.35 50q-4.3 4.35-4.3 10.45t4.3 10.4q4.35 4.3 10.45 4.3t10.45-4.3q4.3-4.3 4.3-10.4z"/> <path fill="#1D1D1B" d="M71.7 68.35q3.3-3.3 3.3-7.9v-.05q0-4.65-3.25-7.9-3.3-3.3-7.95-3.3-4.6 0-7.9 3.25-3.25 3.3-3.25 7.9Q52.6 65 55.9 68.3q3.25 3.3 7.9 3.3 4.6 0 7.9-3.25z"/> <path fill="#575756" d="M65.15 58.5q-.15-.1-.75-.35l1.75-8.6q-2.3-.7-4.55 0l1.75 8.55q-.45.1-.8.3l-4.85-7.3q-2.1 1.1-3.25 3.2l7.3 4.85q-.2.25-.35.75l-8.6-1.75q-.7 2.3 0 4.55l8.7-1.85q.05.4.3.8l-7.3 4.8q1.2 2.2 3.25 3.2l4.75-7.3q.5.3.75.35l-1.75 8.6q2.3.7 4.55 0l-1.75-8.55q.6-.1.8-.25l4.85 7.3q2.2-1.2 3.2-3.25l-7.3-4.8q.3-.4.35-.75l8.5 1.8q.7-2.25 0-4.55L66.15 60q-.1-.5-.3-.75l7.3-4.9q-1.1-2-3.2-3.15l-4.8 7.3z"/> <path fill="#3C3C3B" d="M65 40.3h-2.35v7.95H65V40.3zM25.45 80.95H18.2v7.25h7.25v-7.25z"/> <path fill="#59595B" d="M19 84.6q0 1.15.85 2 .8.85 2 .85 1.15 0 2-.85.8-.85.8-2 0-1.2-.8-2-.85-.85-2-.85h-.05q-1.15 0-2 .85-.8.8-.8 2z"/> <path fill="#FFEC00" d="M25.85 64.75h-7.2v3.7h7.2v-3.7z"/> <path fill="#9C9B9B" d="M65.2 61.85q.6-.55.6-1.4 0-.8-.6-1.4-.55-.6-1.4-.6-.8 0-1.4.6-.6.6-.6 1.4 0 .85.6 1.4.6.6 1.4.6.85 0 1.4-.6z"/> <path fill="#868686" d="M70.6 82.75H57.05v2.4H70.6v-2.4z"/> </g></svg>

Unfortunalty the colors are inside the path. I need the svg with color in CSS Style. If i try to generate a SVG in illustrator this is the result (look the part into the **):

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> <svg version="1.1" baseProfile="basic" id="_x31__9_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 450 450" xml:space="preserve"> **<style type="text/css"> .st0{fill:#EAB38B;} .st1{fill:#97B6C4;} </style>** <g id="_x34_"> <g id="_x32__6_"> <g id="_x32__5_"> <g id="_x32_"> <g id="_x31_6_1_"> <g> <path class="st0" d="M114.9,145.6c-0.1,0-0.3,0-0.4,0l-0.8,0.1c-0.8,0.1-0.6,0.3-1.4,0.4c-1.6,0.1-3.2,0-4.8,0.1 c-1.5,0.1-2.1-0.9-3-2c-1.4-1.8-3.7-3.5-4.3-5.8c-0.2-0.9-0.6-1.9-0.7-2.8c-0.1-0.8,0-1.5-0.2-2.3c-0.2-0.7-0.9-2.1,0.3-2 c0.3,0,0.9,0.1,1.1,0.3c0.5,0.4,0.9,1.1,1.1,1.7c0.1,0.5,0,1,0.2,1.4c0.2,0.6,0.6,1.2,0.9,1.7c0.1-1.6,0-2.9-0.2-4.5 c-0.1-1.3-0.2-2.6-0.3-3.9c-0.1-1.8-0.3-3.7-0.4-5.5c0,0,0,0,0,0c0-0.3-0.1-0.7-0.1-1.1c0-0.1,0.1-0.3,0.2-0.4 c0,0,0-0.1,0.1-0.1c0,0,0,0,0,0c0.1-0.1,0.1-0.1,0.2-0.2c0.6-0.5,1.3-0.5,2-0.2c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0 c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.2,0,0.4,0,0.6c0.1,1.3,0.2,2.5,0.2,3.8c0.1,0.9,0.1,1.7,0.2,2.6 c0.1,0.8,0.2,2,0.5,2.3c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7c0-0.4-0.2-1,0-1.5c0.2-0.8,1.5-1,2.1-0.6 c0.7,0.4,0.7,1.3,0.8,2c0,0.2,0.3,0.9,0.4,0.6c0.2-0.6,0.2-1.7,0.5-2c0.4-0.6,1.4-0.7,2-0.3c0.9,0.6,0.8,2.1,0.9,3 c0.2-0.2,0.1-0.8,0.3-1c0.2-0.3,0.7-0.5,1-0.5c1.5,0,1.4,1.8,1.5,2.9c0.3,1.9,0.4,3.8,0.4,5.7c0,0.9-0.1,1.9-0.2,2.8 c-0.2,0.8-0.7,1.5-0.8,2.3c-0.1,0.7,0.1,1.4,0.1,2.1c0,0.4,0,0.6,0.1,0.8C115,145.5,115,145.6,114.9,145.6z"/> <polygon class="st1" points="116,144.6 104.5,145.2 105.1,148.4 116,147.3                        "/> </g> </g> </g> </g> </g> </g> </svg>

I'm looking for a solutions with a converter or something else.

Thank you so much!

[ankushr40215001]

Hey there,

Not sure if I got your query correctly, but what I understand is you want an animate and SVG for which you are using a plugin, however, it does not give  you the color profiles in CSS rather its in HTML5 correct?

For me the simplest way would have  been to create the SVG in Illustrator and then simply export it to Animate cc.

Steps shown here - Import SVG files

However, please clarify more if you are intending to achieve something else or anything which I didn't catch.

Thanks!

Ankush

[ClayUUID · Accepted solution]

SVG colors are already in CSS style. They both use the exact same format-- six-digit hex codes.