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

Добавить оптимизацию svg #1

Open
yarastqt opened this issue Aug 2, 2021 · 0 comments
Open

Добавить оптимизацию svg #1

yarastqt opened this issue Aug 2, 2021 · 0 comments

Comments

@yarastqt
Copy link
Member

yarastqt commented Aug 2, 2021

Описание

Т.к. фигма не всегда корректно выгружает svg, то необходимо добавить ещё один этап оптимизации svg, для удаления лишних элементов, пример:

before

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.99994C2 6.44766 2.44772 5.99994 3 5.99994H21C21.5523 5.99994 22 6.44766 22 6.99994C22 7.55222 21.5523 7.99994 21 7.99994H3C2.44772 7.99994 2 7.55222 2 6.99994ZM2 11.9999C2 11.4476 2.44772 10.9999 3 10.9999H15C15.5523 10.9999 16 11.4476 16 11.9999C16 12.5522 15.5523 12.9999 15 12.9999H3C2.44772 12.9999 2 12.5522 2 11.9999ZM3 15.9999C2.44772 15.9999 2 16.4476 2 16.9999C2 17.5522 2.44771 17.9999 3 17.9999H12C12.5523 17.9999 13 17.5522 13 16.9999C13 16.4476 12.5523 15.9999 12 15.9999H3ZM15 16.9999C15 16.4476 15.4477 15.9999 16 15.9999H18V13.9999C18 13.4476 18.4477 12.9999 19 12.9999C19.5523 12.9999 20 13.4476 20 13.9999V15.9999H22C22.5523 15.9999 23 16.4476 23 16.9999C23 17.5522 22.5523 17.9999 22 17.9999H20V19.9999C20 20.5522 19.5523 20.9999 19 20.9999C18.4477 20.9999 18 20.5522 18 19.9999V17.9999H16C15.4477 17.9999 15 17.5522 15 16.9999Z" fill="black" />
  </g>
  <defs>
    <clipPath id="clip0">
      <rect width="24" height="24" fill="white" />
    </clipPath>
  </defs>
</svg>

after

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.99994C2 6.44766 2.44772 5.99994 3 5.99994H21C21.5523 5.99994 22 6.44766 22 6.99994C22 7.55222 21.5523 7.99994 21 7.99994H3C2.44772 7.99994 2 7.55222 2 6.99994ZM2 11.9999C2 11.4476 2.44772 10.9999 3 10.9999H15C15.5523 10.9999 16 11.4476 16 11.9999C16 12.5522 15.5523 12.9999 15 12.9999H3C2.44772 12.9999 2 12.5522 2 11.9999ZM3 15.9999C2.44772 15.9999 2 16.4476 2 16.9999C2 17.5522 2.44771 17.9999 3 17.9999H12C12.5523 17.9999 13 17.5522 13 16.9999C13 16.4476 12.5523 15.9999 12 15.9999H3ZM15 16.9999C15 16.4476 15.4477 15.9999 16 15.9999H18V13.9999C18 13.4476 18.4477 12.9999 19 12.9999C19.5523 12.9999 20 13.4476 20 13.9999V15.9999H22C22.5523 15.9999 23 16.4476 23 16.9999C23 17.5522 22.5523 17.9999 22 17.9999H20V19.9999C20 20.5522 19.5523 20.9999 19 20.9999C18.4477 20.9999 18 20.5522 18 19.9999V17.9999H16C15.4477 17.9999 15 17.5522 15 16.9999Z" fill="black" />
</svg>

Как мы видим, можно спокойно избавиться от clipPath.

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

No branches or pull requests

1 participant