✨ Use penpot metadata only for whole file export

CHANGES.md

@@ -6,6 +6,7 @@
 
 - Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
 - Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386).
+- Enable penpot SVG metadata only when exporting complete files [Taiga #1914](https://tree.taiga.io/project/penpot/us/1914?milestone=295883).
 - Go to a undo step clicking on a history element of the list [Taiga #1374](https://tree.taiga.io/project/penpot/us/1374).
 - Increment font size by 10 with shift+arrows [1047](https://github.com/penpot/penpot/issues/1047).
 - New shortcut to detach components Ctrl+Shift+K [Taiga #1799](https://tree.taiga.io/project/penpot/us/1799).

frontend/src/app/main/exports.cljs

@@ -131,7 +131,8 @@
 
 (mf/defc page-svg
   {::mf/wrap [mf/memo]}
-  [{:keys [data width height thumbnails? embed?] :as props}]
+  [{:keys [data width height thumbnails? embed? include-metadata?] :as props
+    :or {embed? false include-metadata? false}}]
   (let [objects (:objects data)
         root    (get objects uuid/zero)
         shapes
@@ -158,35 +159,36 @@
          (mf/deps objects)
          #(shape-wrapper-factory objects))]
     [:& (mf/provider embed/context) {:value embed?}
-     [:svg {:view-box vbox
+     [:& (mf/provider use/include-metadata-ctx) {:value include-metadata?}
-            :version "1.1"
+      [:svg {:view-box vbox
-            :xmlnsXlink "http://www.w3.org/1999/xlink"
+             :version "1.1"
-            :xmlns "http://www.w3.org/2000/svg"
+             :xmlns "http://www.w3.org/2000/svg"
-            :xmlns:penpot "https://penpot.app/xmlns"
+             :xmlnsXlink "http://www.w3.org/1999/xlink"
-            :style {:width "100%"
+             :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
-                    :height "100%"
+             :style {:width "100%"
-                    :background background-color}}
+                     :height "100%"
+                     :background background-color}}
 
-      [:& use/export-page {:options (:options data)}]
+        [:& use/export-page {:options (:options data)}]
-      [:& ff/fontfaces-style {:shapes root-children}]
+        [:& ff/fontfaces-style {:shapes root-children}]
-      (for [item shapes]
+        (for [item shapes]
-        (let [frame? (= (:type item) :frame)]
+          (let [frame? (= (:type item) :frame)]
-          (cond
+            (cond
-            (and frame? thumbnails? (some? (:thumbnail item)))
+              (and frame? thumbnails? (some? (:thumbnail item)))
-            [:image {:xlinkHref (:thumbnail item)
+              [:image {:xlinkHref (:thumbnail item)
-                     :x (:x item)
+                       :x (:x item)
-                     :y (:y item)
+                       :y (:y item)
-                     :width (:width item)
+                       :width (:width item)
-                     :height (:height item)
+                       :height (:height item)
-                     ;; DEBUG
+                       ;; DEBUG
-                     ;; :style {:filter "sepia(1)"}
+                       ;; :style {:filter "sepia(1)"}
-                     }]
+                       }]
-            frame?
+              frame?
-            [:& frame-wrapper {:shape item
+              [:& frame-wrapper {:shape item
-                               :key (:id item)}]
+                                 :key (:id item)}]
-            :else
+              :else
-            [:& shape-wrapper {:shape item
+              [:& shape-wrapper {:shape item
-                               :key (:id item)}])))]]))
+                                 :key (:id item)}])))]]]))
 
 (mf/defc frame-svg
   {::mf/wrap [mf/memo]}
@@ -197,6 +199,8 @@
 
         frame-id (:id frame)
 
+        include-metadata? (mf/use-ctx use/include-metadata-ctx)
+
         modifier-ids (concat [frame-id] (cp/get-children frame-id objects))
         update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
         objects (reduce update-fn objects modifier-ids)
@@ -214,9 +218,9 @@
            :width width
            :height height
            :version "1.1"
-           :xmlnsXlink "http://www.w3.org/1999/xlink"
            :xmlns "http://www.w3.org/2000/svg"
-           :xmlns:penpot "https://penpot.app/xmlns"}
+           :xmlnsXlink "http://www.w3.org/1999/xlink"
+           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
      [:& wrapper {:shape frame :view-box vbox}]]))
 
 (mf/defc component-svg
@@ -229,6 +233,8 @@
 
         group-id (:id group)
 
+        include-metadata? (mf/use-ctx use/include-metadata-ctx)
+
         modifier-ids (concat [group-id] (cp/get-children group-id objects))
         update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)
         objects (reduce update-fn objects modifier-ids)
@@ -246,9 +252,9 @@
            :width width
            :height height
            :version "1.1"
-           :xmlnsXlink "http://www.w3.org/1999/xlink"
            :xmlns "http://www.w3.org/2000/svg"
-           :xmlns:penpot "https://penpot.app/xmlns"}
+           :xmlnsXlink "http://www.w3.org/1999/xlink"
+           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
      [:& wrapper {:shape group :view-box vbox}]]))
 
 (mf/defc component-symbol
@@ -287,16 +293,16 @@
 
   (let [data (obj/get props "data")
         children (obj/get props "children")
-        embed? (obj/get props "embed?")]
+        embed? (obj/get props "embed?")
+        include-metadata? (mf/use-ctx use/include-metadata-ctx)]
     [:& (mf/provider embed/context) {:value embed?}
      [:svg {:version "1.1"
             :xmlns "http://www.w3.org/2000/svg"
             :xmlnsXlink "http://www.w3.org/1999/xlink"
-            :xmlns:penpot "https://penpot.app/xmlns"
+            :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
             :style {:width "100vw"
                     :height "100vh"
                     :display (when-not (some? children) "none")}}
-
       [:defs
        (for [[component-id component-data] (:components data)]
          [:& component-symbol {:id component-id

frontend/src/app/main/render.cljs

@@ -63,7 +63,7 @@
    (->> (rx/of data)
         (rx/map
          (fn [data]
-           (let [elem (mf/element exports/page-svg #js {:data data :embed? true})]
+           (let [elem (mf/element exports/page-svg #js {:data data :embed? true :include-metadata? true})]
              (rds/renderToStaticMarkup elem)))))))
 
 (defn render-components

frontend/src/app/main/ui/render.cljs

@@ -17,6 +17,7 @@
    [app.main.repo :as repo]
    [app.main.store :as st]
    [app.main.ui.shapes.embed :as embed]
+   [app.main.ui.shapes.export :as ed]
    [app.main.ui.shapes.filters :as filters]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.util.dom :as dom]
@@ -32,6 +33,8 @@
                    (:id object)
                    (:frame-id object))
 
+        include-metadata? (mf/use-ctx ed/include-metadata-ctx)
+
         modifier (-> (gpt/point (:x object) (:y object))
                      (gpt/negate)
                      (gmt/translate-matrix))
@@ -81,9 +84,9 @@
             :width width
             :height height
             :version "1.1"
-            :xmlnsXlink "http://www.w3.org/1999/xlink"
             :xmlns "http://www.w3.org/2000/svg"
-            :xmlns:penpot "https://penpot.app/xmlns"}
+            :xmlnsXlink "http://www.w3.org/1999/xlink"
+            :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
 
       (case (:type object)
         :frame [:& frame-wrapper {:shape object :view-box vbox}]

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

@@ -12,7 +12,7 @@
    [rumext.alpha :as mf]))
 
 (def context (mf/create-context false))
-      
+
 (defn use-data-uris [urls]
   (let [embed? (mf/use-ctx context)
         urls (hooks/use-equal-memo urls)

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

@@ -14,6 +14,8 @@
   [cuerdas.core :as str]
   [rumext.alpha :as mf]))
 
+(def include-metadata-ctx (mf/create-context false))
+
 (mf/defc render-xml
   [{{:keys [tag attrs content] :as node} :xml}]
 

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

@@ -38,6 +38,8 @@
         frame? (= :frame type)
         group? (= :group type)
 
+        include-metadata? (mf/use-ctx ed/include-metadata-ctx)
+
         wrapper-props
         (-> (obj/clone props)
             (obj/without ["shape" "children"])
@@ -53,9 +55,11 @@
               (obj/set! "y" y)
               (obj/set! "width" width)
               (obj/set! "height" height)
-              (obj/set! "xmlnsXlink" "http://www.w3.org/1999/xlink")
               (obj/set! "xmlns" "http://www.w3.org/2000/svg")
-              (obj/set! "xmlns:penpot" "https://penpot.app/xmlns")))
+              (obj/set! "xmlnsXlink" "http://www.w3.org/1999/xlink")
+              (cond->
+                include-metadata?
+                (obj/set! "xmlns:penpot" "https://penpot.app/xmlns"))))
 
         wrapper-props
         (cond-> wrapper-props
@@ -66,7 +70,8 @@
 
     [:& (mf/provider muc/render-ctx) {:value render-id}
      [:> wrapper-tag wrapper-props
-      [:& ed/export-data {:shape shape}]
+      (when include-metadata?
+        [:& ed/export-data {:shape shape}])
       [:defs
        [:& defs/svg-defs          {:shape shape :render-id render-id}]
        [:& filters/filters        {:shape shape :filter-id filter-id}]