From 291906e9fd0aa6dcc59fedb8dff9e6b029f6de89 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 6 Jan 2022 11:21:12 +0000
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20allow=20`<text>`=20elements=20i?=
 =?UTF-8?q?n=20letter=20logos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

To render text in an SVG consistently the system rendering the SVG must
have the fonts specified by the SVG installed.

If the fonts are not installed then the renderer will fall back to a
system font and the text will look different. This is especially bad
news for branding where the right font is an integral part of any brand.

To fix this, the text should instead be converted to `<path>` elements.
This process is sometimes called ‘outlining’.

A few of our logos had this problem, and I’ve fixed most of them by
hand. Adding this validation will stop the problem, coming up again.
---
 app/main/forms.py                            | 4 +++-
 app/main/validators.py                       | 5 +++++
 tests/app/main/views/test_letter_branding.py | 8 ++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index 4b1deece3..fd0e85f50 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -53,6 +53,7 @@ from app.main.validators import (
     NoCommasInPlaceHolders,
     NoEmbeddedImagesInSVG,
     NoPlaceholders,
+    NoTextInSVG,
     OnlySMSCharacters,
     ValidEmail,
     ValidGovEmail,
@@ -1884,7 +1885,8 @@ class SVGFileUpload(StripWhitespaceForm):
         validators=[
             FileAllowed(['svg'], 'SVG Images only!'),
             DataRequired(message="You need to upload a file to submit"),
-            NoEmbeddedImagesInSVG()
+            NoEmbeddedImagesInSVG(),
+            NoTextInSVG(),
         ]
     )
 
diff --git a/app/main/validators.py b/app/main/validators.py
index cda57b3a5..949c1e941 100644
--- a/app/main/validators.py
+++ b/app/main/validators.py
@@ -102,6 +102,11 @@ class NoEmbeddedImagesInSVG(NoElementInSVG):
     message = 'This SVG has an embedded raster image in it and will not render well'
 
 
+class NoTextInSVG(NoElementInSVG):
+    element = 'text'
+    message = 'This SVG has text which has not been converted to paths and may not render well'
+
+
 class OnlySMSCharacters:
 
     def __init__(self, *args, template_type, **kwargs):
diff --git a/tests/app/main/views/test_letter_branding.py b/tests/app/main/views/test_letter_branding.py
index 4a5bdcbe6..3c150222e 100644
--- a/tests/app/main/views/test_letter_branding.py
+++ b/tests/app/main/views/test_letter_branding.py
@@ -357,6 +357,14 @@ def test_create_letter_branding_when_uploading_valid_file(
         ''',
         'This SVG has an embedded raster image in it and will not render well',
     ),
+    (
+        '''
+            <svg height="100" width="100">
+                <text>Will render differently depending on fonts installed</text>
+            </svg>
+        ''',
+        'This SVG has text which has not been converted to paths and may not render well',
+    ),
 ))
 def test_create_letter_branding_fails_validation_when_uploading_SVG_with_bad_element(
     mocker,