title: Adobe Illustrator svg forrmat
body: <p>So I wanted to know how Adobe Illustrator exports an svg, and then I created my own svg:</p>
  
  <pre><code>&lt;svg class="canvas-slider" viewBox="0 0 1366 768.375"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .canvas-slider-path {
          fill: url(#linear-gradient);
        }
      &lt;/style&gt;
      &lt;linearGradient id="linear-gradient" y1="383.75" x2="1366" y2="383.75" gradientUnits="userSpaceOnUse"&gt;
        &lt;stop offset="0" stop-color="#2ad8ff"/&gt;
        &lt;stop offset="1" stop-color="#2a61ff"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;path class="canvas-slider-path" d="M 0 768.375 l 1366 0 l 0 768.375 l -1366 0 Z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>without changing anything, I tried open it with Adobe Illustrator and then immediately export it as an svg, and then I notice the code change to:</p>
  
  <pre><code>&lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="768.375" viewBox="0 0 1366 768.375"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .cls-1 {
          fill: url(#linear-gradient);
        }
      &lt;/style&gt;
      &lt;linearGradient id="linear-gradient" y1="-384.5625" x2="1366" y2="-384.5625" gradientTransform="matrix(1, 0, 0, -1, 0, 768)" gradientUnits="userSpaceOnUse"&gt;
        &lt;stop offset="0" stop-color="#2ad8ff"/&gt;
        &lt;stop offset="1" stop-color="#2a61ff"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;title&gt;test&lt;/title&gt;
    &lt;path class="cls-1" d="M0,768.375H1366V1536.75H0Z" transform="translate(0 -768.375)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>can someone explain it to me the changes on the <code>d</code> property from the <code>path</code>? and also why does it has a <code>transform</code> property?</p>