add method to add SVG from a String and a URL

[insinfo]

add method to add SVG from a String and a URL

[yGuy]

Why?

This lib needs to work on the SVG DOM. Why should it also deal with parsing and loading? What's the use-case?

[insinfo]

my use case is to convert a layout/designer made with fabric.js to PDF in the browser, it would make it much easier if this lib already handles this

[yGuy]

Much easier?

Much easier than this: https://stackoverflow.com/a/24109000 ?

[HackbrettXXX]

I'm also against adding this to the library. We could add it as a code snippet to the readme.

[mdodge-ecgrow]

I'm trying to add an SVG to a new PDF using this method. Basically when the user clicks a link it is supposed to pop up a modal with the newly created pdf in the modal. I am getting this error: Uncaught (in promise) TypeError: e2.tagName is undefined.

Here is the relevant code in my modal component:

...
const svgLogoData = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="89.474"><g fill-rule="evenodd"><path fill...</svg>`;
...
const PriceListPdf = (props: PriceListPDFProps) => {
...
useEffect(() => {
        console.log({priceListToExport});
        if (priceListToExport) {
            displayPDF();

        }
    }, [priceListToExport]);

const displayPDF = () => {
        const doc = new jsPDF(
            {
                orientation: 'p',
                unit: 'in',
                format: 'letter',
                putOnlyUsedFonts: true,
                floatPrecision: 16 // or "smart", default is 16
            });

        const left = doc.internal.pageSize.width / 2;
        // const top = doc.internal.pageSize.height / 2;

        const imgWidth = 4;
        const imgLeft = left - (imgWidth / 2);

        const parser = new DOMParser();
        const svgElement = parser.parseFromString(svgLogoData, "image/svg+xml");
        console.log({svgElement});

        doc.svg(svgElement, {x: imgLeft, y: 0.1, width: imgWidth, height: .889}).then(() => {
            doc.setDisplayMode('fullheight');
            const objectURL = doc.output('datauristring');
            setPDFSrc(objectURL)
        });
};
...

Also tried this:

import logo from '../../assets/logo.svg';
...
const svgElement2 = <img src={logo} alt="Logo"/>;
doc.svg(svgElement2, {x: imgLeft, y: 0.1, width: imgWidth, height: .889}).then(() => {
    doc.setDisplayMode('fullheight');
    const objectURL = doc.output('datauristring');
    setPDFSrc(objectURL)
});

That second method throws this in the console: Uncaught (in promise) TypeError: this.rootSvg.querySelectorAll is not a function

[yGuy]

your "svgElement" is not an SvgElement, but rather a document.

Read the whole answer in the linked stackoverflow question and add .documentElement to your parser call.

Regarding the react stuff - svgElement2 also isn't an SVGElement, but an object that only makes sense to React.

Please use the Discussions to discuss issues in your code. If you find a bug in the library, create a test-case and open a new issue. Thanks.