Hi, First, many thanks on all the hard work for getting images into the documentation, this is certainly a great new feature for ours users.
When testing the rendering of the images on the pgweb docs, I discovered that they are not responsive (see attached) and in its current state, basically makes any page that loads an image significantly more challenging to read on mobile. I've devised a solution to the problem, which will take work both on the pgweb front as well as the SVG image generation. The pgweb side is relatively simple: wherever we see ".figure" we can tack on ".col-xl-8.col-lg-10.col-md-12" (Bootstrap grid codes) which provides some readable images. However, that in itself will not make the images responsive. It appears that the width/height are at present hardcoded onto the SVG, for example in doc/src/sgml/images/gin.svg you find: <svg width="836pt" height="432pt" viewBox="0.00 0.00 836.00 432.00" ... In order to make the SVG responsive, we can change the top line to be: <svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" ... and this fixes it. If/when the change is accepted, I can push the change to the pgweb code that allows for the responsiveness. I can fairly easy come up with a patch to do this for the current SVGs (attached). I tested against the PDF build and it looks fine. Based on the earlier discussions, I'm wondering how we would want to proceed for future images, as I know the goal is to limit the amount of manual editing once an image is generated. Thanks, Jonathan
From b4f94ee3b62d4eeec45cfa4fbba5375810d8ae59 Mon Sep 17 00:00:00 2001 From: "Jonathan S. Katz" <jonathan.k...@excoventures.com> Date: Sun, 31 Mar 2019 10:16:26 -0400 Subject: [PATCH] Modify SVGs to not have view boxes that can scale based on viewing container. This allows for responsive image viewing, particularly on the web. --- doc/src/sgml/images/gin.svg | 3 +-- doc/src/sgml/images/pagelayout.svg | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/doc/src/sgml/images/gin.svg b/doc/src/sgml/images/gin.svg index eacb5c8c16..493f0ffa76 100644 --- a/doc/src/sgml/images/gin.svg +++ b/doc/src/sgml/images/gin.svg @@ -4,8 +4,7 @@ <!-- Generated by graphviz version 2.40.1 (20161225.0304) --> <!-- Title: gin Pages: 1 --> -<svg width="836pt" height="432pt" - viewBox="0.00 0.00 836.00 432.00" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> +<svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 428)"> <title>gin</title> <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-428 832,-428 832,4 -4,4"/> diff --git a/doc/src/sgml/images/pagelayout.svg b/doc/src/sgml/images/pagelayout.svg index 6b819a553e..95711c541f 100644 --- a/doc/src/sgml/images/pagelayout.svg +++ b/doc/src/sgml/images/pagelayout.svg @@ -1,8 +1,8 @@ <?xml version='1.0' encoding='UTF-8' standalone='no'?> -<svg +<svg xmlns='http://www.w3.org/2000/svg' - width='610' - height='210' + viewBox="0.00 0.00 610.00 210.00" + preserveAspectRatio="xMinYMin meet" shape-rendering='geometricPrecision' version='1.0'> <defs> @@ -37,4 +37,4 @@ <text x='324' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Item]]></text> <text x='509' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Special]]></text> </g> -</svg> \ No newline at end of file +</svg> -- 2.14.3 (Apple Git-98)
signature.asc
Description: OpenPGP digital signature
