Adobe Illustrator svg forrmat

Question

So I wanted to know how Adobe Illustrator exports an svg, and then I created my own svg:

<svg class="canvas-slider" viewBox="0 0 1366 768.375">
  <defs>
    <style>
      .canvas-slider-path {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" y1="383.75" x2="1366" y2="383.75" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2ad8ff"/>
      <stop offset="1" stop-color="#2a61ff"/>
    </linearGradient>
  </defs>
  <path class="canvas-slider-path" d="M 0 768.375 l 1366 0 l 0 768.375 l -1366 0 Z"/>
</svg>

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:

<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">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" y1="-384.5625" x2="1366" y2="-384.5625" gradientTransform="matrix(1, 0, 0, -1, 0, 768)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2ad8ff"/>
      <stop offset="1" stop-color="#2a61ff"/>
    </linearGradient>
  </defs>
  <title>test</title>
  <path class="cls-1" d="M0,768.375H1366V1536.75H0Z" transform="translate(0 -768.375)"/>
</svg>

can someone explain it to me the changes on the d property from the path? and also why does it has a transform property?

Answer 1

Here you can find a great explanation about svg path line commands: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Uppercase letters specify absolute coordinates, lowercase letters specify relative coordinates.

Based on that, the two examples result in identical rectangles.

1) d="M 0 768.375 l 1366 0 l 0 768.375 l -1366 0 Z"

• Move to absolute coords (x = 0, y = 768.375)
• Draw a relative line, move right by (x = 1366, y = 0)
• Draw a relative line, move down by (x = 0, y = 768.375)
• Draw a relative line, move left by (x = 1366 (negative sign shows we are going back), y = 0)
• Close the path, get back to the starting point

2) d="M 0, 768.375 H 1366 V 1536.75 H 0 Z" transform="translate(0 -768.375)"

• Move to absolute coords (x = 0, y = 768.375)
• Move horizontally to absolute coord (x = 1366)
• Move vertically to absolute coord (y = 1536.75)
• Move horizontally to absolute coord (x = 0)
• Close the path, get back to the starting point

Illustrator only did a relative -> absolute transformation. In your first example the rectangle is not in the viewBox="0 0 1366 768.375", and I think the transformation was applied to visually move the rectangle back to (x = 0, y = 0);