SVG2Grid: A Multi-Pass Compiler for CSS Grid Diagrams

Abstract

The SVG2Grid multi-pass compiler aims to allow the user to convert standardized SVG images into CSS Grid layouts, using a transparent pipeline which converts the images into the final layout in multiple separate steps, the results of which can all be observed and checked. As creating CSS Grid layouts by hand would be laborious, this pipeline offers a simple alternative, by way of generating the layout for the user from a provided SVG image, which is used as the strict basis for the desired layout. The pipeline specifies its own rules for the SVG layout definitions, to make working with it as simple as possible and avoid unnecessary grunt work by the user.

Cílem vícefázového překladače SVG2Grid je umožnit uživateli převádět standardizo- vané obrázky SVG do rozvržení CSS Grid pomocí transparentního procesu, který obrázky převádí do finálního rozvržení v několika samostatných krocích, přičemž výsledky všech těchto kroků lze sledovat a kontrolovat. Vzhledem k tomu, že ruční vytváření rozvržení CSS Grid by bylo pracné, nabízí tento proces jednoduchou alternativu, a to generováním rozvržení pro uživatele z poskytnutého obrázku SVG, který slouží jako pevný základ pro požadované rozvržení. Proces stanoví vlastní pravidla pro definice rozvržení v SVG, aby byla práce s ním co nejjednodušší a aby se uživatel vyhnul zbytečné rutinní práci.