Rapid Conversion of Text to SVG Graphics with Free API

An overview of Scalable Vector Graphics (SVG)

In today’s tech-driven world, there are enormous opportunities for software developers to create innovative applications. A nice-looking title or design of the application could make your application more competitive on the market. One of the newer and more popular ways to display your text or make icons is Scalable Vector Graphics (SVG). SVG allows for a high degree of detail and can be scaled to any size without losing image quality. Yet, if you’ve ever had to create an SVG graphic from scratch, you know that it can be a time-consuming process. In this tutorial, we’ll explore in depth what SVG is and how to quickly and easily convert text into SVG graphics using a free API. So if you’re looking for an easy way to add some eye-catching visuals to your next project, read on!

What are SVG?

a sample SVG
A sample SVG

SVG (Scalable Vector Graphics) are a web standard that allows you to create images using code. Instead of relying on unique pixels, it applies a vector graphic format that uses XML code to define graphics. Using vectors allow users to generate almost any type of graphics as it controls any specific magnitude and direction of the graphic’s components. This also means that instead of having a bulky image file, SVG files are small and easily scale to any size without losing quality.

Benefits of using SVG

1. Scalability

One of the main advantages of SVG files are the independence of resolution.  SVGs can maintain their quality regardless of the screen resolution or size, in contrast to file formats like JPG and PNG. Thus,  a SVG will still be shown in a high quality on a retina display, while a JPG might appear blurry if it’s not large enough.

2. Editing capabilities

SVG files are outstanding as they are able to be modified directly in graphic editing software like Illustrator or Sketch as well as in a text editor. The markup can be directly adjusted.

3. File size

When properly optimised, using SVGs can result in smaller file sizes than other file types. This is essential when working with higher resolution screens since, unlike raster images, SVGs don’t need to be produced at greater sizes to account for the difference. If you are using SVG files on your website, file size determines the speed of loading images.

4. Styling

It’s quite useful if you can customise and control the styles of your image. Simply by CSS, you can control properties such as fill color, stroke color, sizing, and even more.

Use cases of SVG

The SVG format are viral on the internet nowadays. They are often used in the below set of scenarios:

  • Diagrams. SVG is a good option for illustration with plain lines
  • Charts and graphs.  SVG has the advantages on creating scalable graphs and charts that support animations.
  • Logo or Text Icon Design.  Most often, Logo or Text Icons are re-used across platforms from websites or other applications. SVG resolves the scalability problems.
  • Animation. With CSS, SVG can be rendered as micro-interaction elements in website design. 

What is an API?

We all know that there are somethings we just don’t want do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.

For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.

How do I save text as SVG using an API? How does it work? 

There are a lot of free tools that you can use to convert test into SVGs. A Text-to-SVG Convertor API is a quick and powerful tool to do the job. 

Now, let’s have a try.

The API uses the package text-to-svg. It allows user to convert text to SVG path without native dependence. 

Installation
$ npm install --save text-to-svg
Convert text to SVG path without native dependence
const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();
 
const attributes = {fill: 'red', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};
 
const svg = textToSVG.getSVG('hello', options);
 
console.log(svg);

Now, you may run the script and get you SVG <text> element.


$ node text_to_svg.js
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="72">
  <path fill="red" stroke="black" d="M5.27 9.28L10.62 9.28L10.62 29.36Q15.86 24.12 21.02 24.12Q26.89 24.12 29.60 29.29Q31.11 32.20 31.11 36.35L31.11 59.70L25.77 59.70L25.77 37.93Q25.77 29.21 20.18 29.21Q16.42 29.21 13.57 31.96Q10.62 34.91 10.62 38.71L10.62 59.70L5.27 59.70L5.27 9.28ZM67.68 49.08Q64.55 61.10 54.07 61.10Q47.57 61.10 43.77 55.69Q40.32 50.73 40.32 42.61Q40.32 34.84 43.56 29.88Q47.36 24.12 54 24.12Q66.97 24.12 67.82 43.70L45.74 43.70Q46.16 56.29 54.14 56.29Q60.47 56.29 62.05 49.08L67.68 49.08M62.05 39.09Q60.89 28.93 54 28.93Q47.36 28.93 45.95 39.09L62.05 39.09ZM92.81 51.82Q92.81 54.91 95.77 54.91Q98.19 54.91 101.07 54.35L101.07 59.73Q96.82 60.33 94.82 60.33Q87.19 60.33 87.19 52.84L87.19 9.28L92.81 9.28L92.81 51.82ZM128.81 51.82Q128.81 54.91 131.77 54.91Q134.19 54.91 137.07 54.35L137.07 59.73Q132.82 60.33 130.82 60.33Q123.19 60.33 123.19 52.84L123.19 9.28L128.81 9.28L128.81 51.82ZM162.07 24.12Q168.68 24.12 172.44 29.95Q175.68 34.80 175.68 42.61Q175.68 48.48 173.74 52.91Q170.16 61.14 161.93 61.14Q155.57 61.14 151.77 55.72Q148.32 50.77 148.32 42.61Q148.32 33.82 152.30 28.79Q156.09 24.12 162.07 24.12M161.93 29.14Q158.06 29.14 155.88 33.19Q153.95 36.74 153.95 42.61Q153.95 48.02 155.53 51.43Q157.71 56.11 162 56.11Q165.94 56.11 168.12 52.07Q170.05 48.52 170.05 42.68Q170.05 36.60 168.05 33.12Q165.90 29.14 161.93 29.14Z"/>
</svg>

See the reference

Create your own Text-to-SVG Convertor API

Simply with a few steps below, you may have your own Text-to-SVG Convertor API which converts the text to SVGs with a few clicks. Let’s follow the below step-by-step guide!

First, you will need a suitable API provider. Using Open Image Lab’s Text-to-SVG Convertor API, you can get free access to give any number of time of API call.

Why should you choose this server?

The Text-to-SVG Convertor is supported by OpenAPIHub, an All-in-one API Platform that supports API Needs and it is certified as “AWS Qualified Software” since 2022. You can register for an API portal for free, share and monetise APIs easily on the trustable platform certified by ISO27001.

Prerequisites

You will need a suitable QR Code API provider. Using Open Image Lab’s QR Code API, you can proceed easily as follows :

1. OpenAPIHub Developer Account

You need to sign up for an OpenAPIHub developer account in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.

2. Active API Subscription

You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.

3. API Credential

An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to OpenAPIHub. For more information, please refer to “Create API Key“.

You may check out the full API documentation here in the OpenAPIHub.

UI Design of the API

It’s hard to use or attract more users if your API do not have an easy-to-use user interface. Follow the below HTML to create a backbone of your UI. 

<div id="app">
  <div class="demo-description">
    <h2>Text to SVG</h2>
    <span>To protect your credentials.</span>
    <br>
    <span>DO NOT save this API Key in the code sandbox!!</span>
  </div>
  <div class="test-area">
    <div class="input-area">
      <span>Text</span>
      <input
        type="text"
        placeholder="OpenAPIHub"
        v-model="text"
      >
      <br>
      <span>Font Size</span>
      <input
        type="text"
        placeholder="Font Size"
        v-model="font_size"
      >
      <br>
      <span>API Key</span>
      <input
        type="text"
        placeholder="Input your key here"
        v-model="apikey"
      >
      <br>
      <button v-on:click="generate">Convert</button>
    </div>
  
    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Fill in the Text, Font Size and API Key, then press "Convert".
      </template>
      <template v-else>
        <div v-html="result" />
      </template>
    </div>
  </div>
</div>

And of course, some CSS are the essentials to beautify it.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
  background: #20262E;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
}
  
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 400px;
}
  
.demo-description {
  text-align: center;
  margin-bottom: 20px;
}
  
.demo-description h2 {
  font-weight: semibold;
  margin-bottom: 5px;
}
  
.demo-description span {
  color: #999999;
}
  
.test-area {
  display: flex;
}
  
.input-area {
  text-align: right;
}
  
.input-area span {
  display: inline-block;
  line-height: 48px;
  margin-right: 8px;
  text-align: right;
  width: 150px;
}
  
.input-area input {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  padding: 0 7px;
}
  
.input-area input::placeholder {
  color: #d0d0d0;
}
  
.input-area button {
  background-color: #57abf0;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 15px;
  width: 166px;
  padding: 15px 10px;
}
  
.output-area {
  color: #505050;
  font-size: 14px;
  margin: 20px;
  margin-right: 0px;
  width: calc(100% - 350px);
}
  
@media screen and (max-width: 616px) {
  .input-area {
    text-align: center;
  }
 
  .input-area span {
    text-align: left;
  }
    
  .output-area {
    width: calc(100% - 150px);
  }
    
  .input-area button {
    width: 140px;
    padding: 10px 7px;
  }
}
  
/* .output-area svg {
  transform: scale(3) translateX(-30px) translateY(-95px);
} */

Create a sample API with Vue.js

Now, you can add the following Vue.js script to make your custom convertor.

const endpoint = 'https://trial-api-text-to-svg-2q2s.gw.openapihub.com/text-to-svg/svg';
 
new Vue({
  el: '#app',
  data() {
    return {
      text: '',
      font_size: 72,
      apikey: '',
      result: '',
      error: ''
    }
  },
  methods: {
    generate: function() {
      const axiosConfig = {
        headers: {
          'content-type': 'application/json',
          'x-openapihub-key': this.apikey
        }
      }
       
      const requestBody = {
        text: this.text,
        x: 0,
        y: 64,
        fontSize: this.font_size,
        kerning: true,
        letterSpacing: 0,
        tracking: 0,
        anchor: 'left baseline',
        attributes: {
            fill: "black",
            stroke:"grey"
        }
      }
 
      axios.post(endpoint, requestBody, axiosConfig)
        .then(res => {
          this.error = ''
          this.result = unescape(res.data)
        }).catch(err => {
          this.error = `Error occurred -<br>${err.response.data.message}`
          console.log('Error', err.response.data.message)
        })
    }
  }
})

Convert your text now!

Now that we have all the materials prepared. Let’s have a try on our work.

Simply Fill in the Text, Font Size and API Key, then press “Convert”. Swiftly, you can get your the country’s name or code you need.

And the output is as follows:

Conclusion

Today we have learnt what is a SVG, and how do we use and create it with the easy-to-use API. From now on, you can try to make high-resolution logos, illustrations, and icons on your projects with the simple way on your custom API. So what are you waiting for? Go make more beautiful graphics!

Next Steps?

Just to make it even easier for you, the sample Text-to-SVG API that you just use right away is powered by OpenAPIHub. So what are you waiting for? Try out our API Now in OpenAPIHub and see how easy it is to facilitate your business, projects or work now! 

OpenAPIHub is an API Platform that help you define API subscription and enable API Monetization with ease. Check the following 2-min What is OpenAPIHub video for more and try OpenAPIHub for Free!

Ready to Start Your API Journey?

Join OpenAPIHub and connect to the fast growing API Hub Community to grow your API Business today!

Start for Free