# Use an SVG File {% hint style="info" %} **TIP:** Expand past the common definition of a quilt block. If you're doing an entire FPP quilt, you can even think of the quilt top as a "quilt block" and import a huge SVG file. {% endhint %} ## Create a Custom Block using an SVG File 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. #### What's an SVG? 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). *** ## 01 | Prepare your SVG File

*Example SVG file that can be imported into PreQuilt*

{% hint style="info" %} **BEFORE:** Make sure that you create and save your shapes as an .SVG file on your computer first. Also, very helpful to have your block already sized (1 inch = 72 pixels) so that they import at the correct scale. {% endhint %} 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: #### 1. SVG files are at Scale. 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. #### 2. SVG shapes are Filled. 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. *** ## 02 | Import SVG File into PreQuilt The first step is to create a custom block and then import your SVG file into the block. 1. Click on the **BLOCKS** tab on the left side control panel.

2. Click on the **Make Custom Block** button.

3. The **Block Editor** panel will slide out.

4. Click on the **SVG** button (

) on the central vertical toolbar.

5. Your computer's file system will open. Select the **SVG file** and click **Open**. * **Note:** Wording might be different on a PC.

6. 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. 7. You will now see our Moon shape imported into PreQuilt.

*SVG file is now a block piece in PreQuilt*

8. 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.

9. You will now see your new block saved in your BLOCKS tab.

*** ## 03 | Modify SVG Shapes for Quilt Blocks 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. ### a | Add a Fabric Link to your SVG Shape 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. 1. Click on the **Edit Block** button for the quilt block that has your SVG shape.

2. 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.)

3. The FABRICS tab will appear. Click on the smaller **Fabric Links** tab. * **Note:** SVG shapes are imported using Static Fabrics (to learn more about click [*here*](/prequilt-101/all-about-fabric/static-fabrics.md)).

4. Click on the **Link** button for the Fabric Link you'd like to use. 1. In this example, I'm going to use Fabric Link B (currently using Kona Black).

5. You will now see the SVG shape is now black.

6. 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.

### b | Add a Background to an Imported SVG Block 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! 1. Click on the **Edit Block** button for the quilt block that has your SVG shape.

2. 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.

3. Click on the **Scale to Fit** button (

) the central vertical toolbar.

4. 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.

5. Then **click on our square shape** and while still **holding down on the button, move it below** our SVG shape.

*Before: Square piece is on top of moon shape*

*After: Square piece is underneath moon shape*

6. 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.

### c | Rotate Your SVG Shape 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. 1. 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. 2. 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.

3. **Release** the button once the shape is rotated as desired.

### d | Resize Your SVG Shape {% hint style="info" %} **TIP:** It's a good idea to turn off the Snap to Position and Snap to Scale features when resizing your SVG shape. Those buttons are both found on the central, vertical toolbar. By turning them off, you will have more control over the size and placement of your SVG shape. {% endhint %} You will need to use the bounding box around the SVG shape to resize it. 1. 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. 2. 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.

3. **Release** the button once the shape is resized as desired.

### e | Duplicate Your SVG Shape Much like the other shapes in your PreQuilt built blocks, you can also duplicate (or clone) your SVG shapes. 1. In the Block Editor, click on the **SVG shape** you'd like to duplicate.

2. Click on the **Clone** button (

) on the central, vertical toolbar.

3. Another copy of your SVG shape will appear in a staggered position to its original.

4. Move and rotate it as desired.

### f | Add Another SVG Shape If you'd like to add an additional SVG shape to your block, no problem! 1. In the Block Editor, click on the SVG button (

) on the central vertical toolbar.

2. Your computer's file system will open. Select the **SVG file** and click **Open**. * **Note:** Wording might be different on a PC.

3. A pop-up message will appear once your SVG file has been successfully imported. Click the **No. Don't resize** button.

4. You will now see our new pill shape imported into this block.

5. Move and rotate it as desired.

6. 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.

7. You will now see your new block saved in your BLOCKS tab.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.prequilt.com/prequilt-101/all-about-quilt-blocks/use-an-svg-file.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.