html.snippets

# UTILITY snippets
# #<expand> -> id="${1}"${2}
# .<expand> -> class="${1}"${2}
# lang<expand> -> lang="${1}"${2}

snippet     instyle
  style="${1}" ${2}

snippet     @style
  <style>@import url(${1});${2}</style>
  ${3}

snippet     @script
  <script>System.import(${1});${2}</script>
  ${3}

# for svg and symbol element 
snippet     viewbox
  viewBox="${1:#:<min-x> <min-y> <width> <height>}" ${2}


# CONTAINER snippets 

snippet     svg
  <svg ${1:#:id class style transform x y viewBox} width="${2:100%}" height="${3:100%}" preserveAspectRatio="${5:xMidYMid meet}" zoomAndPan="${6:disable}">
    ${7}
  </svg>

snippet     g
  <g ${1:#:id class style}>
    ${2}
  </g>
  ${3}

# defs -> <use href="#id"> or via CSS (f.e. filter: url(#id))

snippet     defs
  <defs ${1:#:id class style}>
   ${2}
  </defs>
  ${3}

# symbol = defs + g

snippet     symbol
  <symbol ${1:#:id class style viewBox} preserveAspectRatio="${3:xMidYMid meet}" refX="${4:0}" refY="${5:0}">
    ${6}
  </symbol>
  ${7}

# DESCRIPTIVE CHILD snippets

snippet     title
  <title ${1:#:id class style}>${2}</title>
  ${3}

snippet     desc
  <desc ${1:#:id class style}>${2}</desc>
  ${3}

# GRAPHIC snippets

snippet     use
  <use ${1:#:id class style} x="${2:0}" y="${3:0}" width="${4:100%}" height="${5:100%}" href="${6}" />
  ${7}

# Switch render. Evalutates childs attributes 'requiredExtensions' and 'systemLanguage'
snippet     switch
  <switch ${1:#:id class style}>
    ${2}
  </switch>
  ${3}

# PATH and SHAPES snippets
# OPTIONAL attribute for all elements: pathlength -> may be useful for animations
snippet     pathlength
  pathLength="${1}"${2}

snippet     path
  <path ${1:#:id class style} d="${2}" />
  ${3}

snippet     rect
  <rect ${1:#:id class style} x="${2:0}" y="${3:0}" width="${4:0}" height="${5:0}" rx="${6:auto}" ry="${7:auto}" />
  ${0}

snippet     circle
  <circle ${1:#:id class style} cx="${2:0}" cy="${3:0}" r="${4:0}" />
  ${5}

snippet     ellipse
  <ellipse ${1:#:id class style} cx="${2:0}" cy="${3:0}" rx="${4:auto}" ry="${5:auto}" />
  ${6}

snippet     line
  <line ${1:#:id class style} x1="${2:0}" y1="${3:0}" x2="${4:0}" y2="${5:0}" />
  ${6}

snippet     polyline
  <polyline ${1:#:id class style} points="${2}" />
  ${3}

snippet     polygon
  <polygon ${1:#:id class style} points="${2}" />
  ${3}

snippet     mesh
  <mesh ${1:#:id class style} href="${2}" />
  ${3}

# TEXT and TSPAN snippets

snippet     text
  <text ${1:#:id class style} x="${2:0}" y="${3:0}" dx="${4:0}" dy="${5:0}" ${6:#:lengthAdjust="spacing | spacingAndGlyphs"}${7:#:rotate=""}${8:#:textLength=""}>
    ${9}
  </text>

snippet     tspan
  <tspan ${1:#:id class style} x="${2:0}" y="${3:0}" dx="${4:0}" dy="${5:0}" ${6:#:lengthAdjust="spacing | spacingAndGlyphs"}${7:#:rotate=""}${8:#:textLength=""}>
    ${9}
  </tspan>

# FILTER snippets

snippet     filter
  <filter id="${1:#:filterID}" x="${2:-10%}" y="${3:-10%}" width="${4:120%}" height="${5:120%}" filterUnits="${6:objectBoundingBox}" primitiveUnits="${7:userSpaceOnUse}">
    ${8}
  </filter>

snippet     feflood
  <feflood flood-color="${1:#:red/HEX}" result="COLOR-${2:#:red}"></feflood>
  ${3}