Конспект по SVG

SVG.html

<!-- SVG -->
<style>
  figure {
    display: inline-block;
    width: 200px;
    text-align: center;
  }

  .svg-image {
    background: #cec;
    fill: none;
  }

  .button {
    /* По аналогии называются атрибуты элементов SVG */
    fill: red;
    fill-opacity: .5;

    stroke-width: 10;
    stroke-opacity: .7;

    transition: all .1s ease-in-out;
  }

  .button:hover {
    r: 45;
    fill-opacity: .7;
    stroke-opacity: .9;
  }

  .svg-symbols {
    display: none;
  }

  .triangle {
    fill: white;
  }

  .grouped {
    stroke: green;
  }

  .stroke {
    stroke: black;
    stroke-width: 2;
  }

  .fill {
    fill: #666;
    fill-opacity: .7;
  }

  .svg-image text {
    fill: none;
    stroke: white;
    stroke-width: 1;
    font-size: 110%;
    font-family: sans-serif;
    font-weight: 700;
  }

  .line {
    stroke-linecap: round; /* square */
    stroke-dasharray: 10 5 0 5;
  }

  .zigzag {
    stroke-width: 6;
    stroke-linejoin: bevel; /* round, miter */
    stroke-miterlimit: 1; /* сколько углов будет выпирать при параметре linejoin: miter */
  }

  .curve {
    stroke-dasharray: 5 5;
  }

  .circle {

    stroke: #6c6;
    stroke-width: 6;
    stroke-dasharray: 252 252;
    stroke-dashoffset: 252;
    transition: all .5s linear;
    cursor: pointer;
  }

  .circle:hover {
    stroke-dashoffset: 0;
  }

  marker {
    fill: black;
  }
</style>

<svg class="svg-symbols" viewBox="0 0 0 0">
  <symbol id="triangle" viewBox="0 0 10 9">
    <polygon points="2,7 5,2 8,7"/>
  </symbol>
</svg>

<figure>
  <svg class="svg-image" viewBox="0 0 200 200"><!-- viewBox="x y width height" -->
    <defs>
      <marker id="arrowhead" viewBox="0 0 10 10" orient="auto" markerWidth="5" markerHeight="5" refX="3" refY="5">
        <polygon points="0,0 10,5 0,10, 3,5" />
      </marker>

      <linearGradient id="linearGradient" x1="0" y1="0" x2="1" y2="1">
        <stop stop-color="pink" offset="0%"/>
        <stop stop-color="red" offset="100%"/>
      </linearGradient>
      <radialGradient id="radialGradient" cx=".35" cy=".3" r=".6">
        <stop stop-color="yellow" offset="30%"/>
        <stop stop-color="orange" offset="100%"/>
      </radialGradient>

      <pattern id="diamond" width="20" height="20" patternUnits="userSpaceOnUse">
        <!-- К сожалению, паттерны не всегда масштабируются. Для того, чтобы это исправить можно прописать размеры SVG-элементу -->
        <rect fill="violet" x="5" y="5" width="10" height="10" transform="rotate(45 10,10)"/>
      </pattern>
    </defs>

    <line class="stroke line" x1="10" y1="10" x2="90" y2="10" marker-end="url(#arrowhead)"/>
    <polyline class="stroke zigzag" points="10,20 30,30 60,20 70,30 90,20" marker-start="url(#arrowhead)"/>
    <path class="stroke curve" d="m10,40c0,0 4.29291,26 20.60595,27c16.31304,1 12.02015,-27 22.32312,-27c10.30298,0 22.32312,15 35,5 0,0" marker-mid="url(#arrowhead)"/>

    <rect class="stroke" fill="url(#diamond)" x="10" y="80" width="80" height="20"/>
    <rect class="stroke fill" x="10" y="110" width="80" height="20" rx="10" ry="10"/>
    <ellipse class="stroke" fill="url(#radialGradient)" cx="50" cy="165" rx="40" ry="25"/>
    <circle class="stroke fill circle" cx="150" cy="50" r="40"/>
    <polygon class="stroke" fill="url(#linearGradient)" points="110,100 150,120 190,110 180,140 120,150"/>

    <image xlink:href="http://chittagongit.com//images/png-icon/png-icon-14.jpg"
      x="155" y="155" width="60" heigth="60"/>

    <text x="87" y="185" transform="rotate(-10 87,185)">
      SVG Graphics
      <tspan x="100" dy="16">new line</tspan>
    </text>
    <!-- К этому тексту применяются стандартные CSS-стили -->
  </svg>
  <figcaption>SVG Primitives</figcaption>
</figure>

<figure>
  <svg class="svg-image" viewBox="0 0 200 200">
    <g class="grouped">
      <circle class="button" cx="150" cy="50" r="40"/>
      <use class="triangle" href="#triangle" x="145" y="5" width="20" onclick="hello(event)"/>
      <use class="triangle" href="#triangle" x="65" y="15" width="100"/>
    </g>
  </svg>
  <figcaption>SVG CSS</figcaption>
</figure>


<!-- Инструменты
https://github.com/legomushroom/mojs
http://snapsvg.io/
https://greensock.com/gsap
http://lazylinepainter.info/
https://github.com/chenglou/react-motion
https://github.com/SVG-Edit/svgedit
svgomg — оптимизация SVG
spritesh — сделать один файл из папки с изображениями
svgeezy
SVGInjector — подключает картинку из файла и позволяет работать с её разметкой
svg4everybody
grunpicon (grunticon)
inkscape
-->

<!-- Источники
[x] https://www.lynda.com/SVG-tutorials/Learning-SVG/622089-2.html
[ ] https://www.tutorialspoint.com/svg
[ ] https://developer.mozilla.org/en-US/docs/Web/SVG
-->