ui : fix missing svg use and animation elements in preview and download (#28962)

* ui : allow svg use and animation tags in sanitizer

* ui : neutralize href animation retargeting in svg sanitizer

tools/ui/src/lib/constants/svg-blocks.constants.ts

@@ -41,6 +41,8 @@ export const SVG = {
 	 * so an author <style> stays scoped to that root and can not reach the page.
 	 */
 	SANITIZE_CONFIG: {
+		ADD_ATTR: ['calcMode', 'from', 'to'],
+		ADD_TAGS: ['animate', 'set', 'use'],
 		FORBID_TAGS: ['foreignObject', 'script'],
 		USE_PROFILES: { svg: true, svgFilters: true }
 	},

tools/ui/src/lib/utils/sanitize-svg.ts

@@ -1,6 +1,17 @@
 import { SVG } from '$lib/constants';
 import DOMPurify from 'dompurify';
 
+/**
+ * animate and set can retarget href or xlink:href to a javascript: uri through
+ * to, from, by or values, none of which DOMPurify checks as a uri. Dropping
+ * attributeName in that case leaves the animation inert.
+ */
+DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
+	if (data.attrName === 'attributename' && /href$/i.test(data.attrValue.trim())) {
+		data.keepAttr = false;
+	}
+});
+
 /**
  * Sanitizes a raw svg string for safe inline rendering.
  * Returns the cleaned svg markup, or an empty string when the input is not a