Use an SVG File
Use Cases // To Visualize Appliqué & Foundation Paper Piecing (FPP)
Last updated
Use Cases // To Visualize Appliqué & Foundation Paper Piecing (FPP)
Last updated
Up until now, creating a custom block in PreQuilt was limited to the shapes that are preloaded in PreQuilt (square, HST, orange peel, etc).
But our newest update will enable you to import an SVG file and use it to import other shapes that you are unable to create using those basic building block shapes.
Scalable Vector Graphics (SVG) is a web-friendly vector file format. It is not pixel-based, and uses mathematical formulas based on points and lines. Programs like Illustrator, Photoshop, and Inkscape can save or export SVG files (.svg).
There are few properties that are important to note when creating your SVG file so that it can be imported into PreQuilt. Your SVG should:
For best results, make sure that your SVG file is at scale. 1:1 measurements are helpful, but not necessary. Make sure that they can be resized to your desired block size.
Use the ratio 1 inch = 72 pixels as a helpful conversion.
In order for the SVG file to be usable and convertible to block shapes (patches or pieces), they need to be individual filled shapes. They cannot be outlines or line drawings.
The first step is to create a custom block and then import your SVG file into the block.
Click on the BLOCKS tab on the left side control panel.
Click on the Make Custom Block button.
The Block Editor panel will slide out.
Your computer's file system will open. Select the SVG file and click Open.
Note: Wording might be different on a PC.
A pop-up message will appear once your SVG file has been successfully imported.
If the width and height of the block is correct → Click the No. Don't resize button.
If the width and height of the block is not correct → Click on the Yes. Resize Block button.
Note: The block and all SVG shapes will scale to fit the block space.
You will now see our Moon shape imported into PreQuilt.
You will now see your new block saved in your BLOCKS tab.
Now that we have our SVG shape imported into PreQuilt, you might want to manipulate it or modify it. There are a few different things you can do to your SVG shape now.
One of the huge benefits of using PreQuilt is that you can quickly link different fabrics (solids or printed) to different block pieces. And that's true for your newly imported SVG shapes!
To learn more about Fabric Links click here.
Click on the Edit Block button for the quilt block that has your SVG shape.
The Block Editor panel will slide out. Click on the SVG shape that you would like to add a Fabric Link to. (A bounding box will appear around the shape once selected.)
The FABRICS tab will appear. Click on the smaller Fabric Links tab.
Click on the Link button for the Fabric Link you'd like to use.
In this example, I'm going to use Fabric Link B (currently using Kona Black).
You will now see the SVG shape is now black.
If you see a gingham print or checkerboard print around your imported SVG shape, you do not have a background fabric in place. Make sure you add one!
Click on the Edit Block button for the quilt block that has your SVG shape.
Since the square is the top layer, it will expand to fill the entire block space and cover our SVG shape. To move it to the background, click on the Layers tab.
Then click on our square shape and while still holding down on the button, move it below our SVG shape.
Now our block has a background fabric using Fabric Link A.
Note: That there no longer is a gingham or checkerboard transparency behind the SVG shape. This indicates that the background is no longer empty.
It's easy to rotate your SVG shape in PreQuilt. You will need to use the bounding box around the SVG shape to rotate it.
In the Block Editor, click on the SVG shape you'd like to rotate.
Note: You will notice that there is now a bounding box around the shape. The bounding box has 8 smaller squares located in each corner and in the middle of each side of the box. There is also one square that appears above the shape.
Using the mouse or trackpad, click on and hold onto the square that appears above the shape. While holding, move the square to rotate the shape in place.
Release the button once the shape is rotated as desired.
You will need to use the bounding box around the SVG shape to resize it.
In the Block Editor, click on the SVG shape you'd like to resize.
Note: You will notice that there is now a bounding box around the shape. The bounding box has 8 smaller squares located in each corner and in the middle of each side of the box.
Using the mouse or trackpad, click on and hold onto one of the corner squares of the bounding box that appears around the shape. While holding, move the square to make the shape bigger or smaller.
Release the button once the shape is resized as desired.
Much like the other shapes in your PreQuilt built blocks, you can also duplicate (or clone) your SVG shapes.
In the Block Editor, click on the SVG shape you'd like to duplicate.
Another copy of your SVG shape will appear in a staggered position to its original.
Move and rotate it as desired.
If you'd like to add an additional SVG shape to your block, no problem!
Your computer's file system will open. Select the SVG file and click Open.
Note: Wording might be different on a PC.
A pop-up message will appear once your SVG file has been successfully imported. Click the No. Don't resize button.
You will now see our new pill shape imported into this block.
Move and rotate it as desired.
You will now see your new block saved in your BLOCKS tab.
Click on the SVG button () on the central vertical toolbar.
Click on the larger Save button () in the top right corner of the Block Editor. Then click on Save to Quilt to return to the digital quilt wall.
Note: SVG shapes are imported using Static Fabrics (to learn more about click ).
Click on the larger Save button () in the top right corner of the Block Editor. Then click on Save to Quilt to return to the digital quilt wall.
The Block Editor panel will slide out. To add a background, click on the square shape ()on the central vertical toolbar. (Default Fabric Link A used). A square will appear on top of our SVG shape.
Click on the Scale to Fit button () the central vertical toolbar.
Click on the Clone button () on the central, vertical toolbar.
In the Block Editor, click on the SVG button () on the central vertical toolbar.
Click on the larger Save button () in the top right corner of the Block Editor. Then click on Save to Quilt to return to the digital quilt wall.
