Page MenuHomePhabricator

Ensure usage of SVGs where applicable
Open, HighPublic

Description

We should ensure to prefer usage of SVGs over pixel-based formats for our style guide example images where possible.
Images like “Icon style” or “creating icons” are much better off being SVGs for HiDPI displayes. Examples currently at https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style.html#colors

Event Timeline

Volker_E created this task.Jan 27 2017, 9:56 PM
Restricted Application added a project: Design. · View Herald TranscriptJan 27 2017, 9:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E triaged this task as High priority.Jan 30 2018, 9:32 PM
Volker_E assigned this task to Nirzar.Mar 3 2018, 4:08 AM

@Nirzar There were not only technical issues holding this back. In order not having to double-optimize (quite a workload when first exporting and manually code QAing every single Sketch exported SVG) old and soon to be amended new pictures, I'd prefer to wait for the general imagery to be overhauled.

For technical reference on why to put role=img on SVG <img> images, see https://css-tricks.com/accessible-svgs/

Volker_E added a comment.EditedApr 21 2018, 2:47 AM

@Nirzar
Design principles

  • 'This is for everyone picture' is currently missing in resources -> Imagery file.
  • 'content first' features a bitmap instead of paths, unusable for SVG
  • 'trustworthy, yet joyful' features a typo in “Oribitial”, fixed in the SVG, but not the fallback

Visual style

  • Rams article SVG export fails strongly, word and letter spacing gets mixed up
  • Principles color & type export fails, again spacing out of control
  • Principles style – comparison is currently missing in resources file, apart from featuring questionable contents

Prepared all imagery that is unaltered in SVG and pushed to the repo in order to move on and provide mobile users a better experience for the images that already work.

In the course of this bug, it got identified, that SVG letter-spacing is still not supported in Firefox as only browser. Not a blocker, but sub-optimal.

Volker_E removed a subscriber: JGirault.

A few of the images are flawed in SVG due to x-browser rendering bugs outlined above and have to be replaced by PNGs again for the time being. Report by @Ladsgroup