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

There's no way to edit SVG files in the project because they are "overcompressed" #6334

Closed
oleq opened this issue Feb 26, 2020 · 8 comments · Fixed by #6336
Closed

There's no way to edit SVG files in the project because they are "overcompressed" #6334

oleq opened this issue Feb 26, 2020 · 8 comments · Fixed by #6336
Labels
domain:ui/ux This issue reports a problem related to UI or UX. status:discussion type:task This issue reports a chore (non-production change) and other types of "todos".

Comments

@oleq
Copy link
Member

oleq commented Feb 26, 2020

Provide a description of the task

Check out what link.svg looks like when opened in Sketch:

image

(similar results in other graphic editors).

This is because of our aggressive clean-up-svg-icons task squeezes every byte of the SVG files using every technique available and SVG editors don't handle this well on the input (FYI it looks ok in the browser).

Unless we have these icons stored somewhere locally (or retrieved from the git history) there's no way to edit and improve them. Or copy and use as a base for future icons.

We need to either:

  • find some way to decompress the icons (unlikely to happen),
  • store and maintain a sketch file with icons for everyone to use,
  • store raw (uncompressed) SVG icons somewhere else (in parallel to compressed ones).

cc @panr @dkonopka @Reinmar

@oleq oleq added status:discussion type:task This issue reports a chore (non-production change) and other types of "todos". domain:ui/ux This issue reports a problem related to UI or UX. labels Feb 26, 2020
@panr
Copy link
Contributor

panr commented Feb 26, 2020

Well done! We should call our compressor Picasso ;-D

@oleq
Copy link
Member Author

oleq commented Feb 26, 2020

Related svg/svgo#1164 and svg/svgo#1137.

@oleq
Copy link
Member Author

oleq commented Feb 26, 2020

Looks like the following helps:

diff --git a/scripts/svgo.config.json b/scripts/svgo.config.json
index a5ba4161..dd238555 100644
--- a/scripts/svgo.config.json
+++ b/scripts/svgo.config.json
@@ -3,8 +3,9 @@
                   "collapseGroups",
                   "removeDimensions",
                   { "removeAttrs": { "attrs": "(fill|stroke|fill-rule)" } },
+                  { "convertPathData": { "noSpaceAfterFlags": false } },
                   "removeTitle",
                   "removeComments",
                   "removeMetadata"
          ]
-}
\ No newline at end of file
+}

@panr
Copy link
Contributor

panr commented Feb 26, 2020

I can confirm. Fix works fine! 🎉 (tested locally)

@oleq
Copy link
Member Author

oleq commented Feb 26, 2020

I created a PR. It solves the technical aspect and brings mangled icons back to life but we may not be that lucky next time. Let's discuss the way we store, share and develop editor resources like Sketch files.

panr added a commit that referenced this issue Feb 26, 2020
Internal: The SVG icons compressed by the clean-up-svg-icons task (svgo) should be editable in graphical editors. Closes #6334.
panr added a commit to ckeditor/ckeditor5-basic-styles that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-ckfinder that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-code-block that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-core that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-heading that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-font that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-highlight that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-indent that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-link that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-list that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-media-embed that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-paragraph that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-remove-format that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-restricted-editing that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-special-characters that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-table that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-ui that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-undo that referenced this issue Feb 26, 2020
panr added a commit to ckeditor/ckeditor5-widget that referenced this issue Feb 26, 2020
@oleq
Copy link
Member Author

oleq commented Feb 26, 2020

Re-opening because of

Let's discuss the way we store, share and develop editor resources like Sketch files.

@oleq oleq reopened this Feb 26, 2020
@panr
Copy link
Contributor

panr commented Feb 26, 2020

Are you sure? This is a good followup to the issue. I would close it and open a new one.

@oleq
Copy link
Member Author

oleq commented Feb 26, 2020

Alright, please a new one and put some reference to this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:ui/ux This issue reports a problem related to UI or UX. status:discussion type:task This issue reports a chore (non-production change) and other types of "todos".
Projects
None yet
2 participants