How to make APNG from SVG for LINE animated Stickers?
Tags: 9vae, line, apng, svg
Published: 2020-10-29 04:51:45

---
title: How to make APNG from SVG for LINE animated Stickers?
published: true
description: 
tags: 9vae, line, APNG, svg
//cover_image: https://direct_url_to_image.jpg
---
![LINE animated Stickers](https://2.bp.blogspot.com/-Q-vZ9U2cJsM/V2opOddE3zI/AAAAAAAAAfM/0LsWCwW_1W8U40e4O9YgPZsjA-EWkJANgCK4B/s400/linestickers.gif)


This article shows how to make APNG from SVG for LINE animated Stickers with a free 2D vector animation editor '9VAe'.



# What is 9VAe ?
* 9VAe is a free 2D animation editor which can export   Animated GIF , APNG, Animated SVG  or QuickTime (9va-mac).
* 9VAe can import SVG vector illustrations.
* 9VAe can create interpolated images. So you can make animation without drawing  pictures.





---

# Creation Guidelines - LINE animated Stickers

[Creation Guidelines - LINE animated Stickers](https://creator.line.me/en/guideline/animationsticker/) shows that you need to prepare 24 APNGs for Animated Sticker Images. 


||Quantity|Resolution|File Format|
|:--|:--|:--|:--|
|Main Image|1|240 x 240|.png(APNG)|
|Animated Sticker Images|24|Up to 320 x 270 (\*1) |.png(APNG)|
|Chat Thumbnail Icon|1|96 x 74|.png|

- (\*1) It is also possible to create an image that is laterally long (ex: 270 x 100) or vertically long (ex: 100 x 270) as long as the longer side of the image is at least 270 pixels.

||Animated Sticker Images|
|:--|:--|
| Playback time| Up to 4 seconds |
|Frame limits | Between 5 and 20 frames(\*2)|
|Color space|RGB|
|Backgrounds for graphics| Must be transparent|
|Maximum file size| 300 KB  for each image. ZIP file is less than 20 MB.|

- (\*2)The first image of the APNG will be displayed as a static image on LINE STORE and the LINE Sticker Shop.
- Use Firefox to test out your APNG files. 

Until now you had to combine PNG  images with an APNG creation tool such as APNG Assembler. Now you can generate APNG directly from animation by using 9VAe. 

# 9VAe Download

You can download 9VAe from the links as follows;


|Download  (Click ![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/67734/dbea08ea-33e3-c9f2-aa04-73528cfa0f7f.png) in the following links)|Download from Vector|how to|
|:--|:--|:--|
| [**9va-win (Windows)**](https://drive.google.com/file/d/0B_jLDEPlHKVjWVIzYWxCVUZwNWM/view?usp=sharing)|[9va-win (Vector)](http://www.vector.co.jp/soft/dl/winnt/art/se515201.html)|[windows](https://codepen.io/danjiro/post/9vae-download-and-install#windows-9va-win-1)|
| [**9va-mac64 (macOS 10.10-)**](https://drive.google.com/file/d/0B_jLDEPlHKVjUE0wWkh4THVsOFk/view?usp=sharing)<br>    [9va-mac (Old Ver.10.4-10.9 is here)](https://drive.google.com/file/d/1Hwkt8fisEcWuHkHcxQy3RfXWRHsypZmb/view?usp=sharing)|[9va-mac (Softnic)](https://9vae-mac.en.softonic.com/mac)|[mac](https://codepen.io/danjiro/post/9vae-download-and-install#macintoh-9va-mac-3)|
| [**9va-pi (Raspberry Pi)**](https://drive.google.com/file/d/0B_jLDEPlHKVjd0RPOFVWbWxwZkU/view?usp=sharing)|[9va-pi (Vector)](http://www.vector.co.jp/soft/other/other/se515318.html)|[pi](https://codepen.io/danjiro/post/9vae-download-and-install#raspberry-pi-9va-pi-5)|
| [**9va-pi (Ubuntu/Linux Mint/Xtra-PC (LinuxX86-32bit))**](https://drive.google.com/file/d/0B_jLDEPlHKVjTmU1M05GanZLWjg/view?usp=sharing)| |[linux](https://codepen.io/danjiro/post/9vae-download-and-install#ubuntu-linux-mint-xtra-pc-9va-pi-7)|




![000.gif](https://2.bp.blogspot.com/-foqmZJa4mm4/WVIapazzmVI/AAAAAAAAAfQ/MV13ZiMTUXgt3Zm9bGyiDg-F85xc7LkjwCLcBGAs/s1600/001c3.gif)

* If you can't run 9va-mac, [see here](https://codepen.io/danjiro/post/9vae-download-and-install#macintoh-9va-mac-3).



# Let's make APNG !

![barrelFish04b.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/9abc8282-95f5-857e-51af-a354b6c129e1.gif)

In this article the  barrelFish animation is used as an example which is created from [Openclipart's SVG illustration](https://openclipart.org/detail/217565/barrel-fish). (See [Make Barrel Fish animation from Openclipart SVG ](http://codepen.io/danjiro/post/make-animation-from-opencliparts-svg))

If you want to try to make APNG, Click [help] on the 9VAe's menu  \> Click 'Play with face(Training)' \> Click 'Transform'. Now you can get a sample animation.


The picture as follows shows the editor screen of 9VAe.



# 1. Move animation to upper left.

![linestamp01b.png](https://qiita-image-store.s3.amazonaws.com/0/67734/00b746be-ed44-a70b-c479-38924851a864.png)

You have to get rid of mergin space around animation.


1.  Click on the number of the first page.(A) \> Click 'Select from This Page'.
2. Click on the number of the last page.(B) \> Click 'Select to This Page'.
3. Now all the animation data is selected. The red sqare marks are shown on the selected pages. The double line selection frame will appear.
4. Drag the double line selection frame (C) toward upper left.
5. You can adjust the position by hitting Shift key and Up, down, left and right keys.


# Change the page size


![linestamp02.png](https://qiita-image-store.s3.amazonaws.com/0/67734/73252615-9b74-f1ac-b4c2-2b14753c99d3.png)

1. Click [Page] on the menu bar   \> Click 'Page Size...' 
2. Enter smaller number of width and height  in order to get rid of mergin space on the right and bottom side.



# 3.Export APNG


- As the animation is  laterally long , the Exporting APNG's width is 320.
- As the Frame limits	to 20 frames, Exporting Time length is 2 seconds and 10 Frames/sec.


1. Click [File] on the menu bar  \> Click 'Sequential images/APNG export' 
2. Enter the name of APNG file. Click [Save]. Now the APNG setting panel will appear as follows. 

![linestamp03b.png](https://3.bp.blogspot.com/-pqx78fgmdKA/WZAR4su_KEI/AAAAAAAAAgM/OWr9jLjEVJ4LfdQl_OkMpc7MLHuaaOybwCLcBGAs/s1600/0000.png)

1. Enter 320 to the width of Picture Size.(A) The height will be set automatically if you check [Keep Ratio].
2. Enter 10 to Frame/sec
3. Enter 2 sec to the Time Length.
4. You must check [Transparent Background]
5. You shold enter 1 to 'APNG loops'(B). The initial value 0 means infinite loop.
5. Click on the [Start] button(C).
6. The question  "Do you want to combine PNGs to an APNG file" will appear. Click [Yes]. The APNG file will be exported.
7. If you click [No], the sequential 20 PNG images will be exported.

# Final words



This article shows 9VAe can  make APNG animation and LINE animated Stickers. 



---
# Related article

### 9VAe Introduction

1. [9VAe Free SVG/GIF Animation editor: Introduction](http://codepen.io/danjiro/post/9vae-introduction)
2. [9VAe Download and Install](http://codepen.io/danjiro/post/9vae-download-and-install)

### 9VAe Beginner Tutorials
1. [9VAe Beginner Tutorial 0 - Overview ](http://codepen.io/danjiro/post/9vae-beginner-tutorial-1)
2. [9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...](http://codepen.io/danjiro/post/9vae-beginner-tutorial-2)
3. [9VAe Beginner Tutorial 2 - AnimeCast, Time](http://codepen.io/danjiro/post/9vae-beginner-tutorial-3)
4. [9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop](http://codepen.io/danjiro/post/9vae-beginner-tutorial-4)
5. [9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF](http://codepen.io/danjiro/post/9vae-beginner-tutorial-5)
6. [How to make a long animation with 9VAe](http://codepen.io/danjiro/post/how-to-make-long-animation-9vae)


### 9VAe Next Step Tutorials
1. [How to make APNG from SVG for LINE animated Stickers?](http://codepen.io/danjiro/post/how-to-make-apng)
2. [Make Barrel Fish animation from Openclipart SVG ](http://codepen.io/danjiro/post/make-animation-from-opencliparts-svg) 
3. [Six steps to make SVG Animation from Openclipart](http://codepen.io/danjiro/post/six-steps-to-make-svg-animation-from-clip-art)
4. [How to make Animated GIF from Openclipart?](http://codepen.io/danjiro/post/how-to-make-animated-gif-from-openclipart)

### 9VAe Animation Examples
1. [9VAe's GIF/SVG Animation examples  in Openclipart](http://codepen.io/danjiro/post/9vae-gif-svg-example-openclipart)

### 9VAe Technical Information
1. [Export Animated GIF in 9VAe](http://codepen.io/danjiro/post/export-animated-gif-in-9vae)