Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An idea to round/rewrite clip path #1882

Open
KrasnayaPloshchad opened this issue Dec 10, 2023 · 0 comments
Open

An idea to round/rewrite clip path #1882

KrasnayaPloshchad opened this issue Dec 10, 2023 · 0 comments

Comments

@KrasnayaPloshchad
Copy link

KrasnayaPloshchad commented Dec 10, 2023

Is your feature request related to a problem? Please describe.
I’ve found out a way to round/rewrite clip path and associated elements to make them effectively reduce their code length, but not affect their visual appearence.

Describe the solution you'd like
As my suggestion, the transform property chould be applied to both clip path and the element that covered by this clip path, not just leave transform property along with clip-path property there, which could effectively reduce file size. For example

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="355" viewBox="0 0 100 71"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M121.374 210.534c3.801-.8 3.601-4.534-.2-8.268v-19.603c-.333-4.867 3.067-8.201 7.735-8.801 4.334-.534 7.868-.734 11.135-3.734 2.8 2.6 6.268 2.934 10.869 3.734 5.067.733 8.468 3.734 7.868 8.801v19.536c-3.601 4.202-3.601 7.936 0 8.335v.534c.875 3.006-.783 4.71 7-3.535 4.534h-29.671c-.755.21-1.427.32-2.007.32-2.229 0-3.109-1.616-2.194-5.388m37.407-17.736v2.267z"/></clipPath></defs>
... Source codes omitted ...
<g clip-path="url(#a)" transform="matrix(1 0 0 -1 -90.042224 231.70811)"><path fill="#cc2030" d="M116.6507 200.793h18.176v19.297h3.975V196.9h-22.151Z"/><path fill="#cc2030" d="M118.4281 190.6057h16.399v-23.674c2.153-.911 2.071-.701 3.975-2.109v29.759h-22.203c.083-.083.128-.249.211-.414 1.649-2.402 1.535-1.905 1.535-3.313 0-.249.332-.083.083-.249"/><path fill="#cc2030" d="M163.1519 200.793h-17.89v19.297h-3.809V196.9h21.119l-.414.994 1.132-.083z"/><path fill="#cc2030" d="M162.4068 190.6057h-17.145v-23.687c-2.07-.745-2.401-1.051-3.809-1.962v29.625h21.837l.056-2.734c-.166-.414-.691-.579-.939-1.242"/></g>
... Source codes omitted ...
</svg>

Should be rewritten as

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="355" viewBox="0 0 100 71"><defs><clipPath id="a"><path d="M31.331776 21.17411c3.801.8 3.601 4.534-.2 8.268v19.603c-.333 4.867 3.067 8.201 7.735 8.801 4.334.534 7.868.734 11.135 3.734 2.8-2.6 6.268-2.934 10.869-3.734 5.067-.733 8.468-3.734 7.868-8.801v-19.536c-3.601-4.202-3.601-7.936 0-8.335v-.534c.875-3.006-.783-4.717-3.535-4.534h-29.671c-.755-.21-1.427-.32-2.007-.32-2.229 0-3.109 1.616-2.194 5.388m37.407 17.736v-2.267z"/></clipPath></defs>
... Source codes omitted ...
<g clip-path="url(#a)"><path fill="#cc2030" d="M26.608476 30.91511h18.176v-19.297h3.975v23.19h-22.151Z"/><path fill="#cc2030" d="M28.385876 41.10241h16.399v23.674c2.153.911 2.071.701 3.975 2.109v-29.759h-22.203c.083.083.128.249.211.414 1.649 2.402 1.535 1.905 1.535 3.313 0 .249.332.083.083.249"/><path fill="#cc2030" d="M73.109676 30.91511h-17.89v-19.297h-3.809v23.19h21.119l-.414-.994 1.132.083z"/><path fill="#cc2030" d="M72.364576 41.10241h-17.145v23.687c-2.07.745-2.401 1.051-3.809 1.962v-29.625h21.837l.056 2.734c-.166.414-.691.579-.939 1.242"/></g>
... Source codes omitted ...
</svg>

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant