🐛 Fix problem when importing a SVG with text

CHANGES.md

@@ -46,6 +46,7 @@
 - Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)
 - Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838)
 - Fix crash on iOS when displaying viewer [#1522](https://github.com/penpot/penpot/issues/1522)
+- Fix problem when importing a SVG with text [#1532](https://github.com/penpot/penpot/issues/1532)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -98,14 +98,8 @@
            (contains? shape :fill-color)
            {:fill (:fill-color shape)}
 
-           ;; If contains svg-attrs the origin is svg. If it's not svg origin
-           ;; we setup the default fill as transparent (instead of black)
-           (and (not (contains? shape :svg-attrs))
-                (not (#{:svg-raw :group} (:type shape))))
-           {:fill "none"}
-
            :else
-           {})
+           {:fill "none"})
 
          fill-attrs (cond-> fill-attrs
                       (contains? shape :fill-opacity)
@@ -212,6 +206,13 @@
                           (obj/set! "fill" (obj/get svg-styles "fill"))
                           (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity")))
 
+                      ;; If contains svg-attrs the origin is svg. If it's not svg origin
+                      ;; we setup the default fill as transparent (instead of black)
+                      (and (contains? shape :svg-attrs)
+                           (#{:svg-raw :group} (:type shape))
+                           (empty? (:fills shape)))
+                      styles
+
                       :else
                       (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0))]
 

frontend/src/app/main/ui/workspace/shapes.cljs

@@ -69,14 +69,10 @@
    ::mf/wrap-props false}
   [props]
   (let [shape  (obj/get props "shape")
-        opts  #js {:shape shape}
+        opts  #js {:shape shape}]
-
-        svg-element? (and (= (:type shape) :svg-raw)
-                          (not= :svg (get-in shape [:content :tag])))]
 
     (when (and (some? shape) (not (:hidden shape)))
       [:*
-       (if-not svg-element?
        (case (:type shape)
          :path    [:> path/path-wrapper opts]
          :text    [:> text/text-wrapper opts]
@@ -92,9 +88,6 @@
 
          nil)
 
-         ;; Don't wrap svg elements inside a <g> otherwise some can break
-         [:> svg-raw-wrapper opts])
-
        (when (debug? :bounding-boxes)
          [:> bounding-box opts])])))
 

frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs

@@ -9,6 +9,7 @@
    [app.main.refs :as refs]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.svg-raw :as svg-raw]
+   [app.util.svg :as usvg]
    [rumext.alpha :as mf]))
 
 (defn svg-raw-wrapper-factory
@@ -20,11 +21,9 @@
       [props]
       (let [shape      (unchecked-get props "shape")
             childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
-            childs     (mf/deref childs-ref)]
+            childs     (mf/deref childs-ref)
-
+            svg-tag (get-in shape [:content :tag])]
-
+        (if (contains? usvg/svg-group-safe-tags svg-tag)
-        (if (or (= (get-in shape [:content :tag]) :svg)
-                (and (contains? shape :svg-attrs) (map? (:content shape))))
           [:> shape-container {:shape shape}
            [:& svg-raw-shape {:shape shape
                               :childs childs}]]

frontend/src/app/util/svg.cljs

@@ -458,6 +458,49 @@
     :feTile
     :feTurbulence})
 
+;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement
+(defonce svg-group-safe-tags
+  #{:animate
+    :animateColor
+    :animateMotion
+    :animateTransform
+    :set
+    :desc
+    :metadata
+    :title
+    :circle
+    :ellipse
+    :line
+    :path
+    :polygon
+    :polyline
+    :rect
+    :defs
+    :g
+    :svg
+    :symbol
+    :use
+    :linearGradient
+    :radialGradient
+    :a
+    :altGlyphDef
+    :clipPath
+    :color-profile
+    :cursor
+    :filter
+    :font
+    :font-face
+    :foreignObject
+    :image
+    :marker
+    :mask
+    :pattern
+    :script
+    :style
+    :switch
+    :text
+    :view})
+
 ;; Props not supported by react we need to keep them lowercase
 (defonce non-react-props
   #{:mask-type})