Skip to main content
PPFF
PPFF
Participant
July 4, 2018
Answered

SVG CSS Colors style

  • July 4, 2018
  • 2 replies
  • 357 views

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!

    This topic has been closed for replies.
    Correct answer ClayUUID

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

    2 replies

    C
    ClayUUIDCorrect answer
    Legend
    July 6, 2018

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

    ankushr40215001
    ankushr40215001
    Inspiring
    July 6, 2018

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices