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

Ensure https://www.sitepoint.com/tips-accessible-svg/ tips are followed.

Related Objects
Search...

Status	Assigned	Task
Resolved	Volker_E	T167156 Provide Style Guide imagery within Style Guide repository
Resolved	Volker_E	T194686 Imagery for all sections of style guide
Declined	None	T156531 Ensure usage of SVGs where applicable
Resolved	Volker_E	T163189 Make build process with automatic SVG creation out of resources

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 moved this task from Backlog to Next for Development on the Wikimedia Design Style Guide board.Mar 21 2017, 4:50 PM

Volker_E created subtask T163189: Make build process with automatic SVG creation out of resources.Apr 18 2017, 8:15 AM

Volker_E added a parent task: T167156: Provide Style Guide imagery within Style Guide repository.Jun 6 2017, 4:55 PM

Volker_E removed a parent task: T167156: Provide Style Guide imagery within Style Guide repository.

Volker_E added a subtask: T167156: Provide Style Guide imagery within Style Guide repository.Jun 6 2017, 4:57 PM

Volker_E closed subtask T163189: Make build process with automatic SVG creation out of resources as Resolved.Jun 7 2017, 10:32 AM

Volker_E moved this task from Next for Development to Stalled / Waiting on the Wikimedia Design Style Guide board.Jun 7 2017, 5:49 PM

Volker_E removed a subtask: T167156: Provide Style Guide imagery within Style Guide repository.Jul 13 2017, 2:34 PM

Volker_E added a parent task: T167156: Provide Style Guide imagery within Style Guide repository.

Volker_E moved this task from Stalled / Waiting to In Dev/Progress on the Wikimedia Design Style Guide board.Jul 19 2017, 7:06 PM

Volker_E moved this task from In Dev/Progress to Backlog on the Wikimedia Design Style Guide board.Nov 16 2017, 4:28 PM

Volker_E moved this task from Backlog to v1.1 (Goal) on the Wikimedia Design Style Guide board.Jan 23 2018, 12:21 AM

Volker_E moved this task from v1.1 (Goal) to Next for Development on the Wikimedia Design Style Guide board.Jan 30 2018, 5:58 PM

Volker_E triaged this task as High priority.Jan 30 2018, 9:32 PM

@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.

PR at https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/87

Volker_E moved this task from Next for Development to Stalled / Waiting on the Wikimedia Design Style Guide board.Mar 16 2018, 4:45 AM

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

@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 [[ https://bugzilla.mozilla.org/show_bug.cgi?id=371787 | letter-spacing is still not supported in Firefox ]] as only browser. Not a blocker, but sub-optimal.

Provided patch is merged with https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/87

Volker_E removed a project: Patch-For-Review.May 4 2018, 10:43 PM

Volker_E removed a subscriber: • JGirault.

Volker_E added a subtask: T186027: Define aspirational examples for “Imagery” section.May 5 2018, 12:51 AM

Volker_E added a subtask: T186027: Define aspirational examples for “Imagery” section.

Volker_E added a parent task: T194686: Imagery for all sections of style guide.May 14 2018, 11:16 PM

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