8000 An idea to round/rewrite elements with gradient · Issue #2020 · svg/svgo · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
An idea to round/rewrite elements with gradient  #2020
Open
@KrasnayaPloshchad

Description

@KrasnayaPloshchad

Is your feature request related to a problem? Please describe.
I just found out a way to round/rewrite elements with gradient effect to make them effectively reduce their code length.

Describe the solution you'd like
If an element applied gradient, which has gradientTransform property, both two should be rewritten as well, just similar to #1882. For example

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139">
  <defs>
    <radialGradient id="a" cx="0" cy="0" r="1" fx="0" fy="0" gradientTransform="matrix(69.347421 0 0 -69.347421 396.29534 292.68055)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
      <stop offset="0" stop-color="#7898c9"/>
      <stop offset=".0935961" stop-color="#7898c9"/>
      <stop offset=".807882" stop-color="#133a73"/>
      <stop offset="1" stop-color="#133a73"/>
    </radialGradient>
  </defs>
  <path fill="url(#a)" d="M326.947 292.679c0-38.299 31.048-69.346 69.348-69.346 38.301 0 69.348 31.047 69.348 69.346 0 38.3-31.047 69.349-69.348 69.349-38.3 0-69.348-31.049-69.348-69.349m22.414 0c0 25.923 21.013 46.935 46.934 46.935 25.921 0 46.933-21.012 46.933-46.935 0-25.92-21.012-46.933-46.933-46.933s-46.934 21.013-46.934 46.933" transform="matrix(1 0 0 -1 -326.795 362.1805)"/>
</svg>

This should be rewritten as this to make codes simpler but still has proper appearence:

<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139">
  <defs>
    <radialGradient id="a" cx="0" cy="0" r="1" fx="0" fy="0" gradientTransform="matrix(69.347421 0 0 -69.347421 69.50034 69.49995)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
      <stop offset="0" stop-color="#7898c9"/>
      <stop offset=".0935961" stop-color="#7898c9"/>
      <stop offset=".807882" stop-color="#133a73"/>
      <stop offset="1" stop-color="#133a73"/>
    </radialGradient>
  </defs>
  <path fill="url(#a)" d="M.152 69.5015c0 38.299 31.048 69.346 69.348 69.346 38.301 0 69.348-31.047 69.348-69.346 0-38.3-31.047-69.349-69.348-69.349C31.2.1525.152 31.2015.152 69.5015m22.414 0c0-25.923 21.013-46.935 46.934-46.935 25.921 0 46.933 21.012 46.933 46.935 0 25.92-21.012 46.933-46.933 46.933s-46.934-21.013-46.934-46.933"/>
</svg>

Describe alternatives you've considered
N/A

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0