Tried contributing, getting weird results

[ultimate-tester]

Describe the bug I have just finished drawing my first vector image in Illustrator (ever) and managed to get it all in a oneliner for the js file. Unfortunately in Home Assistant the "fill" and "stroke" attributes are unset, defaulting them to some unexpected color. This is the result in home assistant:

If I force the fill and stroke attributes in the developer console it looks fine:

And here is the original image:

Am I doing something wrong? How can I draw the vector images in such a way that the fill and stroke attributes are properly kept or how can I prevent the shape from automatically filling the wrong color?

[rchiileea]

lines are too thin for a start, but you need to do a stroke trace if its only the stroke you want to see

[rchiileea]

if this is a custom button card and thats a SVG file you you should have after your custom the code in the button set like this you can copy and paste this into manual card if you have custom button card and card mod installed and change entity and icon to yours for a better effect when on

'''

entity: #your nano leaf entity here
color: '#769600'
name: nanoleaf
icon:  #your icon name here
extra_styles: |
  @keyframes pulse {
    0% {
      -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF7E00);
      filter: contrast(96%) drop-shadow(3px 3px 15px #FF7E00);
    }
    10% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #9D00FF);
        filter: contrast(96%) drop-shadow(3px 3px 15px #9D00FF);
    }
    20% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF0000);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FF0000);
    }
    30% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #5F9EA0);
        filter: contrast(96%) drop-shadow(3px 3px 15px #5F9EA0);
    }
    40% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FFFF00);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
    }
    50% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF7F50);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FF7F50);
    }
    60% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #008080);
        filter: contrast(96%) drop-shadow(3px 3px 15px #008080);
    }
    780% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #FF1493);
        filter: contrast(96%) drop-shadow(3px 3px 15px #FF1493);
    }
    80% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #1E90FF);
        filter: contrast(96%) drop-shadow(3px 3px 15px #1E90FF);
    }
    900% {
        -moz-filter: contrast(96%) drop-shadow(3px 3px 10px #1E90FF);
        filter: contrast(96%) drop-shadow(3px 3px 15px #1E90FF);
    }
    100% {
      -moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFA500);
      filter: contrast(96%) drop-shadow(3px 3px 15px #FFA500);
    }
  }
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: medium
styles:
  img_cell:
    - padding-left: 50%
    - padding-right: 50%
    - justify-content: center
  card:
    - width: min(25vw, 140px)
    - height: min(25vw, 140px)
    - border-style: solid
    - border-width: 0px
    - border-color: '#769600'
    - border-radius: 20px
    - background: url("/local/images/blacka.jpg")
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  icon:
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
state:
  - value: 'on'
    styles:
      icon:
        - animation: pulse 10s infinite
      state:
        - animation: pulse 10s infinite
      name:
        - animation: pulse 10s infinite
      card:
        - border-style: solid
        - border-width: 2px
        - border-color: '#769600'
        - box-shadow: var(--soft-ui-pressed)
        - animation: pulse 10s infinite
show_state: true
card_mod:
  class: soft-ui
type: custom:button-card

''' if you dont want the glow around the edges of the card just remove

• animation: pulse 10s infinite from the card line under state on section

if you dont like the border remove

    - border-style: solid
    - border-width: 2px
    - border-color: '#769600'

from card