
If you are looking to add your own graphics or tweak the look of your templates in RenderForm, using SVG elements is a great option. In this post, I will walk you through how to insert custom SVGs using both the Canvas editor and the HTML editor, and why SVGs are a useful format to work with.

## First, What is an SVG?

SVG stands for **Scalable Vector Graphics**. It's a way of creating images using code, and it's especially handy because the graphics can scale to any size without getting blurry. Unlike JPEGs or PNGs, SVGs don't lose quality when resized.

In RenderForm, you can use SVGs to build things like custom icons, logos, charts, shapes, or even full illustrations. And because they're made with code, you can style and tweak them directly in the template editor.

### Why use SVG in your templates?

Here are a few reasons why SVGs are useful:
- They stay sharp at any size. Whether someone is looking at your image on a tiny phone or a big monitor, it will still look clean.
- They are easy to style. You can change colors, sizes, and even animate parts of them using CSS.
- You don't need extra image files. One SVG can often replace multiple versions of the same graphic at different sizes.

## How to insert SVG elements into your template?

RenderForm gives you two main ways to work with SVGs: the Canvas editor and the HTML editor. Here is how both options work.

### Using the Canvas Editor

Open your template in RenderForm's canvas default editor or create a new one. 
In the left sidebar, choose the **Custom** component and upload your SVG file.

![SVG component upload](/blog/svg-component-upload.jpeg)

Place the SVG element on the canvas. You can move it around, resize it, and position it wherever you want.

![SVG in Canvas editor](/blog/svg-in-canvas-editor.jpeg)

You can also change some of the visual details. For example, you can:
- Adjust the fill color
- Tweak stroke width
- Set opacity
- Add shadows
- Control individual layers within the SVG

![SVG adjusted](/blog/svg-adjusted.jpeg)

This method is good if you want to upload and adjust SVGs without touching any code.

### Using the HTML Editor

If you are comfortable with code or want more control over the SVG, you can insert it directly in the HTML editor.

Open your template in the HTML editor or create a new one. Paste your SVG markup right into the HTML using the `<svg>` tag. Use CSS to style it however you want.

Below is an example and result of styling an SVG element using CSS:

![SVG styling in HTML editor](/blog/svg-styling-html-editor.jpeg)

Inline SVGs can be manipulated just like any HTML element:
- You can change colors dynamically.
- You can apply filters like `grayscale()`, `drop-shadow()`, `sepia()`, `blur()`.
- You can even add interactivity (like `:hover` effects or animations).

Since SVGs are just code, you can treat them like any other HTML element. This makes them pretty flexible if you want to get creative.

![Creative SVG example](/blog/svg-css-example.jpeg)

## Ideas for using SVG in your templates

Here are a few ideas of how you can use SVGs in your templates:

- **Icons**: Clean and scalable icons for buttons or navigation
- **Logos**: Company logos that look good at any size
- **Charts and graphs**: Simple graphs and visualizations you can style and animate
- **Background patterns**: Use SVG patterns as backgrounds for sections of your template. They can be easily manipulated and styled to create unique designs.
- **Illustrations**: Hand-drawn or vector-style images you can tweak right inside RenderForm
- **Decorative elements**: Use SVG shapes and patterns as decorative elements in your template. They can be easily manipulated and styled to create unique designs.
- **Custom shapes**: Circles, arrows, lines, and other unusual elements to give your design some personality

You can make SVGs using tools like Figma, Adobe Illustrator, Sketch, or Inkscape, then export them and upload to your RenderForm template.

## Conclusion
Adding your own SVGs is a great way to make your RenderForm templates feel more personal or tailored to your style. Whether you prefer dragging and dropping in the Canvas editor or digging into code with the HTML editor, both approaches are simple once you get the hang of them.
Give it a try, and see what you can build. If you get stuck or have questions, the support team is always around to help.

How to add custom SVG elements to your template


In this blog post I will present you how to quickly generate many images for an online session, video course or a conference.
I will use [RenderForm](/) to create a template, load data from a spreadsheet and generate images.

## Create a template

I used a predefined template from 'Templates' tab and adjusted it to my needs. RenderForm offers a great number of templates in many categories.
You can also create your own templates from scratch with an easy-to-use template editor.

In this blog post I will modify texts in two places and change the image (you can see component names on the left side panel).
 - `author_photo` - author image on the right side,
 - `author_name` - author name under the image,
 - `title` - session title.

![template in canvas editor for marketing automation](/blog/template-in-canvas-editor.png)


## Create a spreadsheet

I created a spreadsheet in Numbers, which is a default spreadsheet app for macOS, but you can use Excel or any other spreadsheet program.

In the first row, I put component names with properties I wanted to change, and separated them with a dot.

Property is a variable of component that you want to modify, for example, text, source url, background color or opacity.
Check our docs for more details about [components and their properties](/docs/general/template-properties/). Here is my sample spreadsheet:

- `author_photo.src` - change an image source of `author_photo` component,
- `author_name.text` - change `text` of `author_name` component,
- `title.text` - change `text` of `title` component.

> Optionally, you can add `_fileName` property to change the name of the generated image. Please note that the file name must be unique, and it shouldn't end with a file extension, as it will be added automatically. If you do not add this property, the image will be auto-generated.

![data in spreadsheet](/blog/data-in-spreadsheet.png)

## Generate images

Now, head to the 'Extensions' tab in RenderForm and open 'Spreadsheet' extension. Import created spreadsheet using 'Import from file' button,
and select the template you want to use on left side.

![RenderForm extensions](/blog/bannerly-extensions.png)

If all properties are loaded properly in your file (they must correspond to your selected template), you are ready to start a generation.
To start generating images click 'Generate' button on top of the list, and do not close the window until the generation process is completed.


![list with generated images in spreadsheet extension](/blog/list-with-generated-images.png)

Once the generation is done, you will be able to download the images using 'Download' button.

![generated images from template for marketing automation](/blog/generated-images.png)

With 'Spreadsheet' extension you are able to quickly generate multiple images with one template and customized content.
With image generation and simple image editor, you can create images, post covers or marketing brochures, that match your company, website or app unique style!

<Vimeo/>

How to create many images from a spreadsheet?


Do you have trouble sending birthday wishes to your team members on time? Sometimes, we forget or put it off because it doesn't seem important compared to other work tasks. However, acknowledging birthdays within your team is vital. It helps build a sense of camaraderie, shows appreciation, and creates a positive work environment. In this blog post, we will solve this problem by creating automated and customized birthday wishes. Keep reading for the details!

## Why automate sending birthday cards

Automating the process of sending birthday wishes is a great solution for various reasons:

- You never forget to send wishes, even during busy times.
- Enables scalability, allowing you to send personalized wishes to many recipients simultaneously.
- Saves time and effort by eliminating manual intervention.
- Maintains consistency in your birthday greetings.
- Allows for scheduling and customization in advance, creating a seamless and heartfelt experience for recipients.

Automating birthday wishes makes the process easier and more enjoyable for you. By saving time and effort, automation allows you to spend more quality time with the birthday person. It simplifies the process and lets you focus on the personal aspects of celebrating their special day.

## Birthday wishes automation

The automation we are going to build works great especially for workspaces and teams. The automation combines the power of three platforms:

- [Google Calendar](https://calendar.google.com/): Utilizing Google Calendar, we will **create a dedicated calendar** to keep track of team members' birthdays.
- [RenderForm](http://renderform.io): With RenderForm, we can easily **generate personalized birthday cards**, ensuring a unique touch for each individual.
- [Zapier](http://zapier.com): By harnessing the capabilities of Zapier, we can seamlessly **connect these apps** and effortlessly send birthday messages and corresponding images to the designated Slack channel.

The end result is simple yet impactful. The birthday person will receive a personalized card filled with warm wishes directly on the selected Slack channel. With this automation in place, celebrating team members' birthdays becomes a breeze, fostering a positive and engaging work environment.

## Create and setup Google Calendar


To begin, let's create a new calendar in Google Calendar specifically dedicated to birthdays. Follow the steps outlined in [Google Support's help base here](https://support.google.com/calendar/answer/37095) to create the calendar effectively.

After creating the calendar, we need to populate it with the actual birthdays of our team members. Here's how you can do it:
1. Add event to your calendar (set event time to hour that aligns with when you want the birthday message to be delivered.)
2. Add the birthday person's name as the **event title**.
3. Set the event to **repeat yearly** to ensure it recurs automatically.
4. In the **description**, include a short personalized birthday message that will be added to the birthday card.
5. Ensure that you select the **Birthdays calendar** you created.
6. Set the event as **Free** to avoid affecting your real work calendar availability.

![Creating birthdays calendar in Google](/blog/birthday-cards/birthday-google-calendar.png)

This step may require some initial effort, but remember that it is a one-time task. You may already have some birthdays in your calendar, which can save you time. Once you have completed adding the necessary birthdays, you're ready to proceed to the next step!

> Once the calendar is ready and filled with birthday dates, you can choose to **hide the calendar** to prevent it from impacting your regular work calendar. This way, you can maintain a clean and organized view while still benefiting from the automation.

## Create birthday card template

Now, let's dive into the exciting part of creating a personalized birthday card using RenderForm. This card template will serve as the foundation for the automated birthday wishes, allowing you to customize selected image elements for each recipient.

![Creating birthdays calendar in Google](/blog/birthday-cards/happy-birthday-slack.jpeg)

To begin, log in to your RenderForm account or [sign up for free](/register) if you don't have an account yet. Navigate to **My templates** and start creating your unique birthday card template. With the RenderForm Template Editor, you have the flexibility to incorporate various elements such as **backgrounds, images, emojis, custom shapes, and more**.

For my birthday card template, I've included specific elements that I want to personalize when the card is sent to different individuals:
- birthday person's name (`name`)
- custom text with wishes (`wishes`)

On the left side of the editor, you'll find all the **template elements (components)**. In addition to the mentioned elements, there's an image, background rectangles with colors, emojis, background circles, and other decorative elements.

![Components of the birthdays card template](/blog/birthday-cards/birthday-template-components.png)


> **Tip 1:** Rename the [template components](/docs/general/template-properties/) to easily identify them later during image automation.\
> **Tip 2:** Lock elements that you don't want to change during image generation. You can do this by clicking on the lock button in the element properties panel.

Once you've crafted your template to perfection, remember to save it. Now, you're ready for the final step: creating the automation.

## Create the automation

In this final step, we'll create and configure the automation using Zapier, which will seamlessly connect all our apps and facilitate the automated birthday message delivery to the selected Slack channel.

To get started, log in to Zapier and create a **new Zap** by following the instructions below.

### Setting up the Trigger from Google Calendar

The trigger event will be an event from our birthday calendar, which will initiate the desired action when a birthday is detected.

#### App & event

Choose **Google Calendar** from available apps and select **Event Start** as the trigger event.

![Setting up Google Calendar as trigger in Zapier automation](/blog/birthday-cards/birthday-automation-zapier-trigger.png)

#### Account

Connect Zapier with your Google account to grant it secure access to your calendar. Rest assured, your calendars will not be shared anywhere.

![Connecting Google Calendar to Zapier](/blog/birthday-cards/birthday-automation-connecting-calendar.png)

#### Trigger

Now, it's time to specify the trigger event. Start by selecting the **Birthdays calendar** where you've added all the birthdays in your Google Calendar. Next, set up the **Time Before** and unit (I recommend setting it to 30 minutes, which means that Zapier will check for triggers 30 minutes before the birthday event and initiate the automation accordingly). Click **Continue** when you're done.

![Setting up calendar trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-setup.png)

#### Test

The final step in this part is to test the trigger connection. Simply click on **Test trigger** and wait for the results.

![Testing the trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-test.png)

Once the test is completed successfully, click on **Continue** to proceed to the second part of the automation: connecting with the RenderForm birthday card template.

### Action: Link RenderForm template

In the action phase, we'll connect the birthday card template created in RenderForm with the event details from Google Calendar. This will involve using the event title as the birthday person's name and the event description as the personalized wishes.

#### App & event

Search for RenderForm in the list of apps and select **Create Image** as the event.

![Setting up RenderForm as action in Zapier automation](/blog/birthday-cards/birthday-automation-renderform.png)

#### Account

Connect Zapier with your RenderForm account to gain access to your templates and enable image automation.

![Connecting RenderForm to Zapier](/blog/birthday-cards/birthday-automation-renderform-connect.png)

#### Action

In this step, we need to specify how we replace the components in our birthday card template. As a reminder, we'll be replacing the `name.text` and `wishes.text` components from our template. The birthday person's name can be found in the Google Calendar event as the **event title (Summary)**, and the wishes can be obtained from the **event Description**.

![Setting up RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

#### Test

Next, Zapier will conduct a test to ensure the connection is working correctly. Click on **Continue** and then select **Test action**.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

Once the test is completed, you can **check the test image in the test result**. Open the image link in a new tab in your browser and verify if everything appears as expected.

![Test result with generated test image](/blog/birthday-cards/birthday-automation-renderform-result.png)

Now, instead of publishing our Zap, we need to add one more action: connecting our Slack channel, where the birthday cards will be sent automatically.

### Connect Slack channel

The last step in creating the automation for sending birthday cards is to deliver the actual message and image on Slack. This step follows a similar process, as outlined below.

Begin by adding a new action to our Zap and proceed with the configuration.

#### App & event

Search for Slack in the list of apps and select **Send Channel Message** as the event.

![Setting up Slack as action in Zapier automation](/blog/birthday-cards/birthday-automation-slack.png)

#### Account

Connect Zapier with your Slack account to access Slack channels and enable automated messages.

![Connecting Slack to Zapier](/blog/birthday-cards/birthday-automation-slack-connect.png)

#### Action

In this step we create the message that is sent to Slack. For that we need to:

- select the Slack channel where you want to send the birthday card
- create a message with text and incorporate the RenderForm action result, which is the auto-generated birthday card image

In the message, you can add additional text (optional) and choose the RenderForm action result, which is the automatically generated birthday card image.

![Setting up Slack action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

> You can also personalize the message content! Utilize the birthday person's name from the event title to give it a personal touch!

#### Test

To ensure everything is functioning properly, run one final test.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

#### Publish Zap

Finally, after conducting the test, click the **Publish** button. With that, our birthday card automation is ready to go!

## Birthday card automation test

Before the automated sending of real birthday cards, it's important to perform a test to ensure that everything is set up correctly. Here's how you can do that:

**1. Create a birthday event in your "Birthdays" calendar**, scheduled for now plus 40 minutes. For example, if it's currently 9:00 AM, set the event to start at 9:40 AM. This allows Zapier enough time to run the trigger.

**2. Wait for the trigger to activate** in Zapier. The trigger will check the calendar for any upcoming birthdays.

**3. Check the result** on your designated Slack channel. You should see the automated birthday card message with the personalized wishes and image.

By performing this test, you can ensure that the automation is functioning correctly and that the birthday cards are being sent as intended.

![Test result for birthday card automation in Slack](/blog/birthday-cards/birthday-card-automation-test.jpeg)

Now, sit back, relax, and enjoy the seamless automation of sending personalized birthday wishes to your team members on Slack. Celebrate their special days with a touch of automation and make them feel valued and appreciated!


Automate sending birthday cards to&nbsp;your team members


Creating leaderboard or ranking images can be a repetitive and time-consuming job. You need to find or create a template, add the data, and then export the image. And then repeat on different occasions. Or even worse, create such an image manually every time. If you create many leaderboard images, it can be a tedious task. 

In this tutorial, we will show you how to automate the process of creating leaderboard and ranking images using RenderForm template editor and a simple spreadsheet. With that information, you will be able to create a new leaderboard image in just a few seconds!

## Create leaderboard image template

First, we need to **create a template** for our leaderboard or ranking image. For that, log in to RenderForm and create a template of your choice.

The canvas editor will give you all the options that you can use in your leaderboard image template. Add background, player names, photos, and their score or even star rating!

![Leaderboard template created in RenderForm](/blog/leaderboard-template.png)

When creating a template, name the elements of your image so that you can easily identify them later. For example, you can name the player's name as `player_name` and the player's score as `player_score` instead of `text_1`, `text_2`, etc.  

Save your template and that's all, you won't have to create the same image manually never again. Now, you are ready for automatic image generation!

## Generate new leaderboard image from a template

When your template is ready, now you can easily generate an image with different data. It will take just a few seconds!

Go to **Image Preview**, which shows the image and all elements that can be edited. It is a sort of form which you can use to quickly generate new images from your template.
Next, edit the template elements in the form. Simply replace the default text, e.g., `player_1_text` with the real player name, `Jon Snow`. Proceed with the rest of the elements and add the data for all the players.

![Leaderboard image preview](/blog/leaderboard-image-preview.jpeg)

Once you added all the data, click **Render Now** at the bottom of the list. The image will be generated instantly, and you can see how the new data looks like in your template.

![Leaderboard rendered image from preview](/blog/leaderboard-image-preview-rendered.jpeg)

And that's all, you can now **download the image or share it with your team**. To do that:
- right-click on the rendered image and use the *Save image* option
- use **Copy as browser link** option under the Render now button. This option will generate a link for your image and let you use it online!

## Generate multiple images with spreadsheet

If you need to create **multiple leaderboard or ranking images with different data at once**, then you can use the Spreadsheet automation. It allows you to generate multiple images at once with a few simple steps. 

### Create a spreadsheet with data

Our leaderboard template is ready, so now, we just need to create a spreadsheet with the data we want to display in it.

In the header row of your Spreadsheet, add the **names of the columns** that match the IDs of the elements in the template and their property type. You can copy all the names from the template preview.

For example, in my template I will use `player_1_text.text` where `player_1_text` is the ID of the text element and `.text` is the property of the element that we want to change.

![Spreadsheet with data](/blog/leaderboard-spreadsheet.png)

For a better overview, you can add a column with the image name (`_name`). This will be the **name of the image file** that will be generated.

In the next rows, add the data you want to display in the leaderboard images, so the players' names, photos, and scores. You can add as many rows as you want, each row will be a separate leaderboard image.

> Check out our [video tutorial about image automation using spreadsheet](https://www.youtube.com/watch?v=5jy9xteruno).

### Automate the image generation

Now, go to **Plugins** in RenderForm and choose **Spreadsheet** automation. There, choose the template you created to use it as a base for the leaderboard images.

![Spreadsheet automation plugin](/blog/plugins-spreadsheet.jpeg)

Then, click on **Import** and pick the XLSX file with the data. Once it is loaded, you will see the preview of the images that will be generated with the data from your spreadsheet. In this step, you can check and confirm if everything is correct.

![Preview of auto-generated images](/blog/leaderboard-imported-spreadheet.png)

Finally, click on **Render** and wait for the images to be generated. Once they are ready, you can download them as a zip file with **Download** button.

![Ready to use ranking images with player details and scores](/blog/leaderboard-images.png)

## Conclusion

In this tutorial, we showed you how to automate the process of creating leaderboard or ranking images. With just a few clicks you can generate a new image from your template or multiple images with different data using a simple spreadsheet. Automate your workflow with image generation and save time for more important tasks!

Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #guide

How to add custom SVG elements to your template

How to create many images from a spreadsheet?

Automate sending birthday cards to your team members

Leaderboard and ranking image automation with RenderForm