Batch Importing 1000 SVGs into Photoshop Timeline via Place Embedded

[Pubg32486011zfgs]

I have approximately 1000 SVG files stored in a folder on my Windows 10 system. I need to import all of these SVGs into the Photoshop timeline using the 'File > Place Embedded' feature. 

I'm avoiding the 'Import Media' option because it's significantly slower when dealing with this large number of files. 'Place Embedded' is much faster, but I don't want to manually select each SVG file individually. 

I'm looking for a way to automate this process. Specifically: 

• Is there a script that can automatically import all the SVG files from the folder using 'Place Embedded'?
• I've tried recording an action to select the SVG folder, but I'm unsure how to make the action select a new, unselected file each time it runs. How can I modify the action to achieve this? 

I'm currently using Adobe Photoshop 21.0.3 on Windows 10.

[Stephen Marsh]

You're going to need a script.

Can you provide sample files at a file sharing site like DeopBox, WeTransfer etc?

* A completed layered PSD example of the final required result, with 5-10 example SVG files placed at the correct size and position with the required timeline options etc.

* The same 5-10 individual SVG files and the PSD template

[Pubg32486011zfgs]

following is sample files: 

https://easyupload.io/epuw45 

I wrote following script and it working good but it is still very slow! I can not import 500 or 1000 number of SVG files very fast to photoshop and this is very bad for me - I'm afraid this problem won't be solved: 

#target photoshop
var folder = Folder.selectDialog("Select Folder Containing SVG Files");

if (folder) {
    var files = folder.getFiles("*.svg");

    if (files.length === 0) {
        alert("No SVG files found in the selected folder.");
    } else {
        for (var i = 0; i < files.length; i++) {
            if (ScriptUI.environment.keyboardState.keyName == "Escape") {
                alert("Script stopped by user!");
                break;
            }
            placeEmbeddedSVG(files[i]);
        }
    }
}

function placeEmbeddedSVG(file) {
    var desc = new ActionDescriptor();
    var ref = new ActionReference();

    desc.putPath(charIDToTypeID("null"), new File(file)); // Select file
    desc.putEnumerated(charIDToTypeID("FTcs"), charIDToTypeID("QCSt"), charIDToTypeID("Qcsa")); // Place as smart object
    executeAction(charIDToTypeID("Plc "), desc, DialogModes.NO); // Execute "Place Embedded"
}

[Stephen Marsh]

There is no requested example PSD to determine the size and positioning, nor the timeline aspects of the SVG files placed into Photoshop. So what is the required width and height in pixels of the SVG files? Will they all be placed as separate layers and you will then create the required timeline from the layers?

[Pubg32486011zfgs]

w*h 4000*2000  

yes i will create timeline but layers take very high time to import in Photoshop with 4000*2000 w*h

[Stephen Marsh]

Have you considered alternative software?

[Pubg32486011zfgs]

no - only Photoshop can open my svg files correctly and fully 

[Pubg32486011zfgs]

I place a PSD sample here - embedding process is too long because script convert each layer to smart object layer and it make process long

[Stephen Marsh]

@Pubg32486011zfgs – Thank you for providing the requested PSD.

Each rasterized SVG layer's bounding area is approximately 1887/1888/1889 x 1532 px. The constant is the height.

The canvas size is 4000 x 2000 px.

When I test placing embedded on a 4000 x 2000 px canvas, the initial size is 489 x 384 px.

If I then reset transformations, the size is 2032 x 1598 px

So I'm wondering how you get all the layers placed at a size of 1887/1888/1889 x 1532 px?

How exactly do you get the layers to this size?

[Stephen Marsh]

I place a PSD sample here - embedding process is too long because script convert each layer to smart object layer and it make process long

By @Pubg32486011zfgs

If you can only use Photoshop, then I can only see 2 options:

1) Place the embedded and let Photoshop rasterize the SVG when placing, the place command naturally creates an embedded smart object, that is how it is

or

2) First batch processes all files to raster, then places raster files, not SVG. Starting with pre-rasterized files, you don't need the script to use the place command, it's possible to copy/paste or use the Layer > Duplicate command in a file to open the raster files and transfer them as layers to the target document.

[ExUSA]

Bridge has a Tools->Photoshop->Load Files into Photoshop Layers command that works for SVG files. Have you tried that?

[Stephen Marsh]

Bridge has a Tools->Photoshop->Load Files into Photoshop Layers command that works for SVG files. Have you tried that?

By @ExUSA

Nice idea.

I did try without Bridge, simply using the Load Files into Stack script. It doesn't create smart objects and rasterizes the SVG content to around 2032 x 1598 px in size on a canvas 3417 x 1710 px in size. 

Although these pixel dimensions are not large, things add up when you have 500-1000 layers.

It still takes time, I think that "this is what it is".

[Stephen Marsh]

@Pubg32486011zfgs – Why? Why do you want to do this in Photoshop? You already have a "Flourish template_ Bar chart race.htm" file that provides an animation in a web browser.

[Pubg32486011zfgs]

I want to convert my bar chart race into a high-quality 4K upscaled video and share it on YouTube. However, my PC is very old, and I have tried many screen recording tools with different settings, but none of them have helped. All the recorded videos are blurry and not properly upscaled.

[Conrad_C]

I want to convert my bar chart race into a high-quality 4K upscaled video and share it on YouTube.

By @Pubg32486011zfgs

If it starts out available as SVG from Flourish, then it’s vector graphics, and vector graphics are resolution-independent (they scale with maximum sharpness at all sizes). Therefore I wouldn’t convert them to any pixel format like PNG where upscaling would look worse, and where 4K would result in huge file sizes. I’d keep the graphics in a vector format.

Of course the ideal solution would be to find a video editor or animation app that can both import SVG directly and rasterize it at 4K. I don’t know much about this but a web search turned up this affordable app that can import SVG and export MP4, maybe take a look at it:

Expressive Animator

“Everything you need to create stunning SVG animations in minutes.”

Some apps like Adobe After Effects do import some vector formats such as Adobe Illustrator and can export to 4K video for YouTube. One way to use it might be:

1. Bulk convert the SVG files to Adobe Illustrator (.ai) format. This might be possible by building an action (macro) or script in Illustrator. 

2. Import the Illustrator versions to an Adobe After Effects timeline in a composition set to a 4K frame size.

3. Make sure Continuous Rasterization is enabled for the composition. This will render the Illustrator vector files at the full resolution of the 4K composition. 

4. Export to video for upload to YouTube.

I haven’t actually tried that, so you’d have to test it. However, After Effects can require a powerful PC for 4K work, so it might not work great if your PC is slower or doesn’t quite meet the recommended system requirements.

[Pubg32486011zfgs]

I tried importing my HTML file into Adobe Animate, but it didn’t work—Adobe Animate doesn’t support HTML files. I also attempted to convert my HTML file to an SWF file and import it, but that failed as well.

I’m looking for a way to convert my Flourish Studio bar chart race project into a high-resolution 4K video without using screen recording tools. Unfortunately, I can't export a high-DPI PNG sequence directly from my chart because browsers and scripts have limitations on capturing high-FPS screenshots. I’ve tested several Node.js and Python scripts, but the fastest I could achieve was only 3 high-DPI PNG screenshots per second.

Is there any method to convert a Flourish Studio bar chart race project into a video using any Adobe product?  

project sample: https://flo.uri.sh/visualisation/19321054/embed  

• i have this problem from 6 years ago

[ExUSA]

You may need to do this in a video editor instead.

[Pubg32486011zfgs]

which video editor tool can import high number of svg files ?

[ExUSA]

You will probably need to hop on over to Google and do some searching. Video is a raster-based medium so vector files may not be directly supported.

Or use a more powerful computer for your screen captures?

I suspect that Photoshop on an underpowered computer is just not the right tool for the job.

[Pubg32486011zfgs]

I'm sorry - only my GPU and monitor is old and my PC is powerful!

note that I tested my friends powerful PC to recording video from bar chart race project but output video still have not good quality and is not upscaling video

[ExUSA]

Upscaling video isn't going to work well. If you want a 4k capture, you need to record a 4k display.