diff --git a/d2/components/d2/svg/index.jsx b/d2/components/d2/svg/index.jsx
index 3fa5d9f8..cf91df44 100644
--- a/d2/components/d2/svg/index.jsx
+++ b/d2/components/d2/svg/index.jsx
@@ -1,6 +1,6 @@
 import makeClassnames from 'classnames'
 import { defineComponent, unref, computed } from 'vue'
-import { omitBy, isEmpty } from 'lodash-es'
+import { omitBy, isEmpty, isNumber } from 'lodash-es'
 import { useConfig } from 'd2/components/d2/config/use.js'
 import { makeName, makeClassName } from 'd2/utils/framework/component.js'
 import { px } from 'd2/utils/browser/css.js'
@@ -44,10 +44,12 @@ export default defineComponent({
     })
 
     const height = computed(() => {
-      return px(props.height || props.size)
+      const value = props.height || props.size
+      return isNumber(value) ? px(value) : value
     })
     const width = computed(() => {
-      return px(props.width || props.size)
+      const value = props.width || props.size
+      return isNumber(value) ? px(value) : value
     })
 
     const style = computed(() => omitBy({
diff --git a/d2/utils/browser/css.js b/d2/utils/browser/css.js
index d93bbe86..8059996b 100644
--- a/d2/utils/browser/css.js
+++ b/d2/utils/browser/css.js
@@ -1,12 +1,13 @@
 import { unref } from 'vue'
 
 /**
- * Supplement px unit
+ * Converts value to a number and add px unit
  * @param {string|number} value original value
  * @param {string} unit css unit name
  * @returns {string} css value with unit
  * @example px(14) => '14px'
  * @example px('14') => '14px'
+ * @example px('1em') => '1px'
  */
 export function px (value) {
   return value ? `${parseFloat(unref(value))}px` : ''