🐛 Fix problems with imported SVG embedded images and transforms

CHANGES.md

@@ -5,6 +5,7 @@
 ### :bug: Bugs fixed
 
 - Fix problems with imported SVG shadows [Taiga #4922](https://tree.taiga.io/project/penpot/issue/4922)
+- Fix problems with imported SVG embedded images and transforms [Taiga #4639](https://tree.taiga.io/project/penpot/issue/4639)
 
 ## 1.18.0
 

frontend/src/app/main/data/workspace/svg_upload.cljs

@@ -181,7 +181,7 @@
     (-> (update-in [:svg-attrs :style] dissoc :mix-blend-mode)
         (assoc :blend-mode (-> (get-in shape [:svg-attrs :style :mix-blend-mode]) keyword)))))
 
-(defn create-raw-svg [name frame-id svg-data {:keys [attrs] :as data}]
+(defn create-raw-svg [name frame-id svg-data {:keys [tag attrs] :as data}]
   (let [{:keys [x y width height offset-x offset-y]} svg-data]
     (-> {:id (uuid/next)
          :type :svg-raw
@@ -191,6 +191,7 @@
          :height height
          :x x
          :y y
+         :hidden (= tag :defs)
          :content (cond-> data
                     (map? data) (update :attrs usvg/clean-attrs))}
         (assoc :svg-attrs attrs)
@@ -388,7 +389,7 @@
             disp-matrix (str (gmt/translate-matrix displacement))
             element-data (-> element-data
                              (assoc :tag :g)
-                             (update :attrs dissoc :x :y :width :height :href :xlink:href)
+                             (update :attrs dissoc :x :y :width :height :href :xlink:href :transform)
                              (update :attrs usvg/add-transform disp-matrix)
                              (assoc :content [use-data]))]
         (parse-svg-element frame-id svg-data element-data unames))
@@ -419,7 +420,7 @@
                         hidden (assoc :hidden true))
 
                 children (cond->> (:content element-data)
-                           (or (= tag :g) (= tag :svg))
+                           (contains? usvg/parent-tags tag)
                            (mapv #(usvg/inherit-attributes attrs %)))]
             [shape children]))))))
 
@@ -469,12 +470,12 @@
        (rx/map (fn [uri]
                  (merge
                    {:file-id file-id
-                    :is-local true}
+                    :is-local true
+                    :url uri}
                    (if (str/starts-with? uri "data:")
                      {:name "image"
                       :content (data-uri->blob uri)}
-                     {:name (extract-name uri)
+                     {:name (extract-name uri)}))))
-                      :url uri}))))
        (rx/mapcat (fn [uri-data]
                     (->> (rp/command! (if (contains? uri-data :content)
                                         :upload-file-media-object
@@ -577,12 +578,9 @@
                             (pcb/add-object new-shape))
 
               changes
-              (reduce (fn [changes [index new-child]]
+              (reduce (fn [changes new-child]
-                        (-> changes
+                        (-> changes (pcb/add-object new-child)))
-                            (pcb/add-object new-child)
+                      changes new-children)
-                            (pcb/change-parent (:parent-id new-child) [new-child] index)))
-                      changes
-                      (d/enumerate new-children))
 
               changes (pcb/resize-parents changes
                                           (->> changes

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

@@ -100,10 +100,8 @@
 
         opts  #js {:shape shape :thumbnail? thumbnail?}
 
-        svg-leaf? (and (= :svg-raw (:type shape)) (string? (:content shape)))
-
         [wrapper wrapper-props]
-        (if svg-leaf?
+        (if (= :svg-raw (:type shape))
           [mf/Fragment nil]
           ["g" #js {:className "workspace-shape-wrapper"}])]
 

frontend/src/app/util/svg.cljs

@@ -389,7 +389,8 @@
     :mask-type})
 
 (defonce inheritable-props
-  [:clip-rule
+  [:style
+   :clip-rule
    :color
    :color-interpolation
    :color-interpolation-filters
@@ -458,6 +459,12 @@
     :feTile
     :feTurbulence})
 
+(def parent-tags
+  #{:g
+    :svg
+    :text
+    :tspan})
+
 ;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement
 (defonce svg-group-safe-tags
   #{:animate