• Stars
    star
    1,287
  • Rank 35,621 (Top 0.8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🥑 Vector Drawable optimization tool 🥑

avocado

Build status npm version Coverage status

avocado is a command line tool (similar to svgo) that optimizes Android VectorDrawable (VD) and AnimatedVectorDrawable (AVD) xml files.

Installation

You can install avocado using npm w/ the following command:

npm install -g avocado

Usage

Usage: avocado [options] [file]

Options:

  -V, --version          output the version number
  -s, --string <string>  input VD or AVD string
  -i, --input <file>     input file/directory, or "-" for STDIN
  -o, --output <file>    output file/directory (same as the input file by default), or "-" for STDOUT
  -d, --dir <dir>        optimizes and rewrite all *.xml files in a directory
  -q, --quiet            only output error messages
  -h, --help             output usage information

Examples

# Optimize (and overwrite) a VD/AVD file.
avocado vector.xml

# Optimize (and overwrite) multiple VD/AVD files.
avocado *.xml

# Optimize a VD/AVD file and write the output to a new file.
avocado vector.xml -o vector_min.xml

# Optimize a VD/AVD using standard input and standard output.
cat vector.xml | avocado -i - -o - > vector_min.xml

# Optimize (and overwrite) all of the VD/AVD files in a directory.
avocado -d path/to/directory

# Optimize all VD/AVD files in a directory and write them to a new directory.
avocado -d path/to/input/directory -o path/to/output/directory

# Optimize all files ending with '.xml' and write them to a new directory.
avocado *.xml -o path/to/output/directory

# Pass a string as input and write the output to a new file.
avocado -s '<vector>...</vector>' -o vector_min.xml

avocado rewrites the VectorDrawable using the smallest number of <group>s and <path>s possible, reducing their file sizes and making them faster to parse and draw at runtime. The example below shows the contents of a VectorDrawable before and after being run through avocado.

Before

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="108dp" android:height="108dp" android:viewportHeight="108" android:viewportWidth="108">
  <path android:fillColor="#26A69A" android:pathData="M0,0h108v108h-108z" />
  <group android:pivotX="54" android:pivotY="54" android:scaleX="1.5" android:scaleY="1.5">
    <path android:fillColor="#00000000" android:pathData="M9,0L9,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,0L19,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M29,0L29,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M39,0L39,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M49,0L49,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M59,0L59,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  </group>
  <path android:fillColor="#00000000" android:pathData="M69,0L69,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  <path android:fillColor="#00000000" android:pathData="M79,0L79,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  <path android:fillColor="#00000000" android:pathData="M89,0L89,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  <path android:fillColor="#00000000" android:pathData="M99,0L99,108" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  <group android:translateX="54" android:translateY="54">
    <group android:pivotX="54" android:pivotY="54" android:rotation="180">
      <path android:fillColor="#00000000" android:pathData="M0,9L108,9" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
      <path android:fillColor="#00000000" android:pathData="M0,19L108,19" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
      <path android:fillColor="#00000000" android:pathData="M0,29L108,29" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
      <path android:fillColor="#00000000" android:pathData="M0,39L108,39" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
      <path android:fillColor="#00000000" android:pathData="M0,49L108,49" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
      <path android:fillColor="#00000000" android:pathData="M0,59L108,59" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    </group>
    <path android:fillColor="#00000000" android:pathData="M0,69L108,69" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M0,79L108,79" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M0,89L108,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M0,99L108,99" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,29L89,29" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,39L89,39" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,49L89,49" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,59L89,59" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,69L89,69" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M19,79L89,79" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M29,19L29,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M39,19L39,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M49,19L49,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M59,19L59,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M69,19L69,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
    <path android:fillColor="#00000000" android:pathData="M79,19L79,89" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8" />
  </group>
</vector>

After

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="108dp" android:height="108dp" android:viewportHeight="108" android:viewportWidth="108">
    <path android:fillColor="#26A69A" android:pathData="M0 0h108v108H0z"/>
    <path android:pathData="M-13.5-27v162m15-162v162m15-162v162m15-162v162m15-162v162m15-162v162M69 0v108M79 0v108M89 0v108M99 0v108m63 63h108m-108 10h108m-108 10h108m-108 10h108m-108 10h108m-108 10h108M54 123h108M54 133h108M54 143h108M54 153h108M73 83h70M73 93h70m-70 10h70m-70 10h70m-70 10h70m-70 10h70M83 73v70m10-70v70m10-70v70m10-70v70m10-70v70m10-70v70" android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
</vector>

Build instructions

If you want to contribute, first be sure to install the latest version of Node.js and npm. If you're not sure what IDE to use, I highly recommend checking out vscode.

Then clone this repository and in the root directory, run:

npm install

To build the tool, run:

npm run build

To test the tool, run:

npm run test

More Repositories

1

ShapeShifter

SVG icon animation tool for Android, iOS, and the web
TypeScript
3,895
star
2

kyrie

🍀 Animated Vector Drawables on steroids 🍀
Kotlin
1,067
star
3

adp-delightful-details

This sample app accompanies a blog post I wrote on icon animations
Java
1,044
star
4

adp-activity-transitions

This sample app accompanies a series of blog posts I wrote on transitions in Android
Java
540
star
5

bees-and-bombs-compose

Implementing some cool animations using Jetpack Compose
Kotlin
380
star
6

android-2048-compose

2048 implemented using Jetpack Compose
Kotlin
333
star
7

adp-applistloader

Tutorial: AppListLoader (part 4)
Java
238
star
8

adp-path-morph-submission-status

Submission status path morphing example
Java
210
star
9

adp-worker-fragments

Handling Configuration Changes with Fragments
Java
206
star
10

gcm

Google Cloud Messaging for application servers implemented using the Go programming language.
Go
176
star
11

android-lint-checks-demo

A demo project that shows how to setup and write some basic custom lint checks.
Kotlin
150
star
12

adp-nested-scrolling

Sample app for the Android Design Patterns blog post on nested scrolling.
Java
136
star
13

AndroidDesignPatterns

Android Design Patterns
JavaScript
134
star
14

custom-lollipop-transitions

Java
65
star
15

svg2vd

SVG to VectorDrawable command line tool
TypeScript
47
star
16

floating-camera

Basic implementation of a floating camera view that can draw on top of other applications. Uses the same APIs that Facebook uses to implement Chatheads.
Java
46
star
17

adp-leaky-threads

Activitys, Threads, & Memory Leaks
Java
33
star
18

android-2048-strings

A repository containing all of the strings for the 2048++ application.
24
star
19

adp-contextcompat-getcolor

Java
16
star
20

godesignpatterns

Go Design Patterns
CSS
15
star
21

adp-contact-list-compose

A simple animatable contact list implemented with 100% Jetpack Compose. Written for a blog post that maybe I will finish some day...
Kotlin
13
star
22

adp-theming-buttons-with-themeoverlays

Java
9
star
23

lost-temple-analyzer

TypeScript
9
star
24

roll-off-club

Source code for the Roll Off Club site
HTML
6
star
25

arch-component-sample

Java
6
star
26

WindowInsetsPlayground

In which I figure out how window insets and status bars work on Android
Kotlin
5
star
27

15440-project3

Distributed multiplayer air hockey! Includes an Android client application (written in Java) and a distributed server (written in Go).
Java
3
star
28

network-buffer

An Android project for my networks practicum class (15-446) at CMU.
Java
2
star
29

scouting-manager-2012

Scouting Manager Android Application (as of March, 2012)
Java
2
star
30

droidcon-2017

TypeScript
1
star
31

scouting-manager-2013

Java
1
star