feat(svg): extract svg parser (#3365)

Author: diegomura

.changeset/tall-phones-cheer.md

@@ -0,0 +1,10 @@
+---
+"@react-pdf/examples": minor
+"@react-pdf/image": minor
+"@react-pdf/layout": minor
+"@react-pdf/math": minor
+"@react-pdf/svg": minor
+"@react-pdf/vite-example": minor
+---
+
+feat(svg): extract svg parser

packages/examples/vite/src/examples/svg-image/index.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Document, Page, View, Image, Text, StyleSheet, Font } from '@react-pdf/renderer';
+import {
+  Document,
+  Page,
+  View,
+  Image,
+  Text,
+  StyleSheet,
+} from '@react-pdf/renderer';
 
 import SimpleIcon from '../../../public/simple-icon.svg';
 import TestLogoUnitless from '../../../public/test-logo-unitless.svg';
@@ -10,107 +17,141 @@ import TestLogoCm from '../../../public/test-logo-cm.svg';
 import TestLogoMm from '../../../public/test-logo-mm.svg';
 import VideoCall from '../../../public/video-call.svg';
 
-Font.register({
-  family: 'Roboto',
-  src: '/Roboto-Regular.ttf',
-});
-
 const styles = StyleSheet.create({
   page: {
     padding: 40,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#fafafa',
   },
   title: {
-    fontSize: 24,
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+  },
+  subtitle: {
+    fontSize: 9,
+    color: '#888',
     marginBottom: 20,
-    textAlign: 'center',
   },
-  section: {
-    marginBottom: 30,
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 5,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    marginBottom: 8,
   },
-  sectionTitle: {
-    fontSize: 14,
-    marginBottom: 10,
-    color: '#333',
+  label: {
+    fontSize: 8,
+    color: '#999',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 6,
   },
   row: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 8,
+  },
+  halfCard: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    borderRadius: 5,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+  },
+  imageRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 20,
-    marginBottom: 10,
+    gap: 16,
   },
   imageContainer: {
     alignItems: 'center',
   },
-  label: {
-    fontSize: 10,
-    color: '#666',
-    marginTop: 5,
+  imageLabel: {
+    fontSize: 7,
+    color: '#aaa',
+    marginTop: 4,
+  },
+  footer: {
+    marginTop: 'auto',
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#e8e8e8',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  footerText: {
+    fontSize: 7,
+    color: '#aaa',
   },
 });
 
 const SvgImageExample = () => (
   <Document>
     <Page size="A4" style={styles.page}>
-      <Text style={styles.title}>SVG via Image</Text>
+      <Text style={styles.title}>SVG Image</Text>
+      <Text style={styles.subtitle}>
+        SVG files rendered via the Image component with different sizes and
+        units
+      </Text>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Basic SVG Images</Text>
-        <View style={styles.row}>
+      <View style={styles.card}>
+        <Text style={styles.label}>Basic SVG Images</Text>
+        <View style={styles.imageRow}>
           <View style={styles.imageContainer}>
             <Image src={SimpleIcon} style={{ width: 40, height: 40 }} />
-            <Text style={styles.label}>40x40</Text>
+            <Text style={styles.imageLabel}>40x40</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={SimpleIcon} style={{ width: 60, height: 60 }} />
-            <Text style={styles.label}>60x60</Text>
+            <Text style={styles.imageLabel}>60x60</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={SimpleIcon} style={{ width: 100, height: 100 }} />
-            <Text style={styles.label}>100x100</Text>
+            <Text style={styles.imageLabel}>100x100</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={TestLogoUnitless} style={{ width: 120, height: 120 }} />
-            <Text style={styles.label}>With Text and Gradient (120x120)</Text>
+            <Text style={styles.imageLabel}>With Text and Gradient</Text>
           </View>
         </View>
       </View>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>
-          SVG with Different Units (native size)
-        </Text>
-        <View style={styles.row}>
+      <View style={styles.card}>
+        <Text style={styles.label}>Different Units (Native Size)</Text>
+        <View style={styles.imageRow}>
           <View style={styles.imageContainer}>
             <Image src={TestLogoIn} />
-            <Text style={styles.label}>1in = 72</Text>
+            <Text style={styles.imageLabel}>1in = 72</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={TestLogoCm} />
-            <Text style={styles.label}>3cm ≈ 85</Text>
+            <Text style={styles.imageLabel}>3cm ≈ 85</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={TestLogoPx} />
-            <Text style={styles.label}>120px = 90</Text>
+            <Text style={styles.imageLabel}>120px = 90</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={TestLogoPt} />
-            <Text style={styles.label}>100pt = 100</Text>
+            <Text style={styles.imageLabel}>100pt = 100</Text>
           </View>
           <View style={styles.imageContainer}>
             <Image src={TestLogoMm} />
-            <Text style={styles.label}>50mm ≈ 142</Text>
+            <Text style={styles.imageLabel}>50mm ≈ 142</Text>
           </View>
         </View>
       </View>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Complex image</Text>
-        <View style={styles.row}>
-          <View style={styles.imageContainer}>
-            <Image src={VideoCall} style={{ width: 300, height: 172 }} />
-          </View>
-        </View>
+      <View style={styles.card}>
+        <Text style={styles.label}>Complex SVG</Text>
+        <Image src={VideoCall} style={{ width: 300, height: 172 }} />
+      </View>
+
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>SVG files rendered as images</Text>
+        <Text style={styles.footerText}>Supports multiple unit types</Text>
       </View>
     </Page>
   </Document>
@@ -119,6 +160,6 @@ const SvgImageExample = () => (
 export default {
   id: 'svg-image',
   name: 'SVG Image',
-  description: 'Test SVG files in Image component',
+  description: 'SVG files rendered via the Image component',
   Document: SvgImageExample,
 };

packages/image/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@react-pdf/png-js": "^3.0.0",
+    "@react-pdf/svg": "^1.0.0",
     "jay-peg": "^1.1.1"
   },
   "files": [

packages/image/src/index.ts

@@ -1,12 +1,5 @@
 import resolveImage from './resolve';
 
-export type {
-  Image,
-  ImageSrc,
-  SvgImage,
-  RasterImage,
-  SvgNode,
-  Viewbox,
-} from './types';
+export type { Image, ImageSrc, SvgImage, RasterImage } from './types';
 
 export default resolveImage;