SVG handling and scales in Plone 6

jensens · September 4, 2022, 9:25pm

I uploaded an SVG in Plone 6. Then I took TinyMCE and used the image in scale large. Now I got a scale of the SVG delivered. IMO this is pointless, but I may not know why this is needed?
Also the "scale" does not behave correcly. If the scale is large than the pixels set in the SVG, the SVG
got a height of 1.

Overall I would tend to say this is all by accident and SVG should never go through our scaling pipeline? Is it all just about caching and invalidating? Are the size caclulations wrong for SVG + scalings?

espenmn · September 5, 2022, 11:37am

SVG is basically a (html?) vector format . I have manually changed sizes of SVGs by editing them with a text editor (since I was sent SVGs in different sizes from a designer). All one need to do is change 'width' and 'height', so theoretically this would be the way to make a scale, I think.

PS: SVG could be a security risk, not sure if 'scaling' could be a problem when 'processing files'

jensens · September 5, 2022, 1:21pm

I can edit this manually (I did already with Inkscape). I am not sure if it is enough to change width="...px" height="..px" and keep like viewBox="0 0 400 300"? It seems so.

So this could be done in plone.scale to ensure a size of the image and in fact it is already processed!

github.com

plone/plone.namedfile/blob/master/plone/namedfile/utils/svg_utils.py#L11-L34


      
          def process_svg(data):
              content_type = None
              w = -1
              h = -1
              size = len(data)
          
          
    tag = None
              try:
                  for event, el in et.iterparse(BytesIO(data), ("start",)):
                      tag = el.tag
                      w = dimension_int(el.attrib.get("width"))
                      h = dimension_int(el.attrib.get("height"))
                      break
              except et.ParseError:
                  pass
          
          
    if tag == "{http://www.w3.org/2000/svg}svg" or (
                  size == 1024 and b"http://www.w3.org/2000/svg" in data
              ):
                  content_type = "image/svg+xml"

This file has been truncated. show original

It seems it has some issues left, like that it does not upscale SVGs or it ends up with a size of 1.... At least I know now where to debug.

espenmn · September 5, 2022, 1:28pm

Yes, I think that is enough. I dont think you should edit the other part (I think that is for 'masking', 'cropping without cropping'. You only need to edit those if (for example) the SVG has 'empty parts around it, which is not related to the 'scale')

jensens · September 5, 2022, 1:50pm

Looks like its size is read but never changed:

github.com

plone/plone.namedfile/blob/74f556edfcdccda05fa9627c26d885a6d4d5d068/plone/namedfile/scaling.py#L286-L294


      
          if getattr(orig_value, "contentType", "") == "image/svg+xml":
              # No need to scale, we can simply use the original data,
              # but report a different width and height.
              if isinstance(orig_data, (str)):
                  orig_data = safe_encode(orig_data)
              if isinstance(orig_data, (bytes)):
                  orig_data = BytesIO(orig_data)
              result = orig_data.read(), "svg+xml", (width, height)
              return result

And IMO this is wrong.

mekell · September 5, 2022, 1:58pm

Make sure the viewport and the view box have the same width-to-height aspect ratio. Or the ratio between both is the same after scaling.

If not you might need to use preserveAspectRatio="<align> [<meetOrSlice>]" (preserveAspectRatio - SVG: Scalable Vector Graphics | MDN)