Scalable vector graphics for Android

Pixplicity

Last update: Dec 31, 2022

Related tags

Utility sharp

Overview

Sharp

Sharp is a Scalable Vector Graphics (SVG) implementation for Android. It facilitates loading vector graphics as SharpDrawables, and can effectively be used wherever a conventional image would be displayed, whether it be as a background, ImageView source, inside a StateListDrawable or used as composites in a TextView.

Forked from:
https://github.com/pents90/svg-android

Merged changes from forks:
https://github.com/b2renger/svg-android
https://github.com/mindon/svg-android
https://github.com/josefpavlik/svg-android

Download

Download the latest from mavenCentral() using Gradle:

dependencies {
    implementation 'com.pixplicity.sharp:library:[VERSION_HERE]@aar'
}

Sample

A sample is included in this repository.

It's easy to load an SVG:

Sharp.loadResource(getResources(), R.raw.cartman)
     .into(mImageView);

SVGs can be loaded from various sources:

loadAsset(AssetManager, String) loads SVG data from an Android application asset;
loadResource(Resources, int) loads SVG data from an Android application resource;
loadString(String) loads SVG data directly from a String;
loadInputStream(InputStream) loads SVG data from an InputStream (but it's your responsibility to close it afterwards);
loadFile(File) loads SVG data from a File, internally opening and closing a FileInputStream to do so.
loadPath(String) loads SVG data directly from a String (but uses a lot of memory doing so).

Sharp facilitates the application of the resulting drawable as well, through the following methods:

into(View) takes care of loading the SVG into the source of the ImageView, or setting the background if the view is not an ImageView;
getDrawable(View) generates a SharpDrawable, which is a subclass of PictureDrawable that respects the SharpPicture boundaries.
getDrawable(View, DrawableCallback) does the same, but on a background thread with callbacks of DrawableCallback;
getSharpPicture() generates a SharpPicture, a wrapper containing a Picture and the SVG bounds and limits;
getSharpPicture(PictureCallback) does the same, but on a background thread with callbacks of PictureCallback;
withAssets(AssetManager) provides access to your application's assets, allowing Sharp to read typefaces;

It's recommended to use into(View) or getDrawable(View), as the View parameter takes care of setting the view's layer type to View.LAYER_TYPE_SOFTWARE.

Typefaces

By loading an SVG from the assets directory using loadAsset(AssetManager, String), or by loading it through a different mechanism and providing access to your application's assets using withAssets(AssetManager), Sharp can read typeface files automatically from the assets directory.

Sharp expects the typeface to be present as:

/assets/fonts/[typeface name].ttf

If your font does not appear, check Logcat for any insightful error messages.

Why isn't my SVG appearing?

If you're setting your view's drawable manually, instead of using into() or intoBackground(), be sure to set the view's layer type to View.LAYER_TYPE_SOFTWARE.

Why no hardware acceleration?

Excellent question! Aside from the fact that PictureDrawable doesn't render correctly, paths do not efficiently render in hardware acceleration. Even if it worked, it would have poor performance. Read this excellent discussion about why this is, if you're interested.

You don't need to disable hardware acceleration on your entire application. Only individual views need to have the layer type changed, and providing your view into SharpPicture.getDrawable(View) takes care of this for you.

Known issues

Text size and position isn't accurate. It's recommended to convert all text to paths in order for it to appear pixel-perfect.
Android's Gradle plugin 2.0.0 (in the preview channel as of January 2016) no longer allows you to place SVG files in /res/drawable. We recommend placing them in /res/raw (or /assets and using loadAsset()) instead.

License

Licensed under the Apache license 2.0.

Comments

Moving from JCenter to MavenCentral

Hey! Any plans to migrate to MavenCentral as JCenter will be sunset on May 1st, 2021?

Useful hints on the migration process can be found here.

Thanks!

opened by lebzuch 11

Failed to resolve: com.pixplicity.sharp:library:1.1.0

Hi, When I add this line:

compile 'com.pixplicity.sharp:library:1.1.0'

To the build.gradle of app on the dependencies section, I get this error while try to sync:

Failed to resolve: com.pixplicity.sharp:library:1.1.0

I don't have this problem, with other library of pixplicity like:

compile 'com.pixplicity.multiviewpager:library:1.0'

More details:

File: build.gradle (App)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

File: build.gradle (app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion '25.0.2'

    defaultConfig {
        applicationId "org.sample.app"
        minSdkVersion 17
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
repositories {
    mavenCentral()
    jcenter()
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.pixplicity.multiviewpager:library:1.0'
    compile 'com.android.support:appcompat-v7:25.3.0'
    compile 'com.android.support:design:25.3.0'
    compile 'com.github.manuelpeinado.imagelayout:imagelayout:1.1.0'
    compile 'com.github.chrisbanes.photoview:library:1.2.3'
    compile 'com.pixplicity.sharp:library:1.1.0'
}

Thanks.

opened by omidraha 4

Remove needless coupling between View and SharpDrawable

To get a SharpDrawable you need to pass a View instance for the sole purpose, that the SharpDrawable can "prepare" that View. That doesn't make much sense if you don't want to pass that SharpDrawable to a View. In my case I would like to use it to render to a Canvas, so now I am forced to instantiate a View just to satisfy the API parameters and then throw it away.

Maybe it would make more sense to "prepare" the View in the Sharp#into() method?

opened by jtietema 4
Suppress debug messages
The library floods logcat with messages.

Desired functionality:

Add a method .setDebugEnabled(boolean) to suppress trivial messages,

Change some of the messages from level DEBUG to level VERBOSE (such as Parsing complete in 9 ms.),

Log similar messages only once per session (such as Unrecognized SVG command: clipPath).

enhancement
opened by mlagerberg 4
Upload to Maven Central (or JCenter)

This library looks great, but is there a reason this library isn't in Maven Central or JCenter? Having to add your bintray repo and hoping that the library will always be available there is a bit of a red flag.
bug

opened by rharter 3
Please add support svg with layers.

First of all thank you for this good library. The problem is that library won't load svg with layers for exaqmple "<g id="Layer_1"> <circle id="test2" class="st0" cx="198.9" cy="200.9" r="42.9"/> It will be great if I can detect layers with path programmatically like some ios libraries. Thanks.

opened by AraBadalyan 3
Remove deprecated methods, code cleanup
According to #23 deprecated methods was removed. I also did some code cleanup:

there was unnecessary hidden2 value, mWhiteMode,

method angle had typos in param names,

unused private method getHexAttr, pathStyleHelper, toFloat

p had assignments just before return

there was redundant class Line that was replaced by RectF
opened by filipc 3
Upload to maven or jcenter to enable easier setup
To make the library easier to setup uploading it to a repo central should be considered:

[x] Uploaded to Maven or jCenter

[x] The documentation updated with the new setup-method

(If it is available in one of those places already or not wished to be so I am sorry for creating this issue. Consider adding it to the Android Arsenal so it is easier to find as well)
opened by Franzaine 3
Transparent background issue

Hi.

Nice library, thanks a lot :)

I am having problems when loading some SVG with transparent background, for example https://back.webel.es/v1/images/categorias/5c12552f15e4fd133439cd97.svg

The transparent background appears black on an Android device using Sharp. Any idea?

Thanks in advance.
help wanted

opened by dburgosp 2

Incompatible with android studio 4

gradle-wrapper.properties: distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
dependencies {
    classpath 'com.android.tools.build:gradle:4.0.1'
}

I had to downgrade the version, as bellow:

gradle-wrapper.properties: distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
dependencies {
    classpath 'com.android.tools.build:gradle:3.6.0'
}

the easiest solution for now...

opened by VonLisboa 1

SVG rendered with dashes instead of solid line

I'm trying to display an SVG, but it's showing up with dashed lines instead of solid ones Here's the link to the svg https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjt25aA9sTmAhUpTd8KHcJ6A98QjRx6BAgBEAQ&url=https%3A%2F%2Ffr.wikipedia.org%2Fwiki%2FFichier%3AMus%25C3%25A9e_de_Chemtou_-_plan.svg&psig=AOvVaw35rtLbWkSaIQ7uPlazjckL&ust=1576955186223429

opened by camilamiranda 1
svg render incorrect

I use loadString to load a string and render into a ImageView, but some area fill error. It should not fill and it just a path. Is it a bug and how to fix it?

This is my SVG string: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" height="904" width="1120" viewBox="0 0 1120 904"> <g stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="black"> <path stroke-width="12" d="M153,235c0,0 0,0 0,0 " /> <path stroke-width="11" d="M153,235c12,-3 12,-2 24,-5 " /> <path stroke-width="7" d="M177,230c67,-15 68,-14 134,-32 " /> <path stroke-width="6" d="M311,198c15,-4 15,-5 27,-13 9,-5 10,-8 17,-13 " /> <path stroke-width="9" d="M269,155c0,0 0,0 0,0 " /> <path stroke-width="11" d="M269,155c-2,5 -3,5 -5,11 " /> <path stroke-width="8" d="M264,166c-6,32 -7,32 -10,65 " /> <path stroke-width="6" d="M254,231c-1,17 0,17 1,34 1,13 2,13 4,27 2,11 2,11 4,22 " /> <path stroke-width="7" d="M263,314c1,5 2,7 3,11 " /> <path stroke-width="10" d="M255,253c0,0 0,0 0,0 " /> <path stroke-width="13" d="M255,253c-2,1 -2,0 -3,1 " /> <path stroke-width="9" d="M252,254c-36,25 -36,25 -72,50 " /> <path stroke-width="6" d="M180,304c-19,13 -19,14 -38,28 -14,11 -13,11 -27,22 -6,5 -6,5 -11,10 " /> <path stroke-width="10" d="M197,298c0,0 0,0 0,0 " /> <path stroke-width="11" d="M197,298c9,-5 9,-6 19,-9 " /> <path stroke-width="7" d="M216,289c35,-13 35,-14 71,-24 " /> <path stroke-width="6" d="M287,265c10,-3 10,-2 21,-3 " /> <path stroke-width="7" d="M308,262c4,-1 4,0 9,0 " /> <path stroke-width="10" d="M177,387c0,0 0,0 0,0 " /> <path stroke-width="12" d="M177,387c4,-2 4,-3 9,-4 " /> <path stroke-width="9" d="M186,383c13,-6 12,-7 26,-11 " /> <path stroke-width="7" d="M212,372c26,-10 26,-10 52,-18 " /> <path stroke-width="6" d="M264,354c9,-3 9,-2 18,-3 " /> <path stroke-width="7" d="M282,351c4,-1 5,-2 9,0 " /> <path stroke-width="9" d="M291,351c4,2 6,3 7,7 " /> <path stroke-width="8" d="M298,358c0,8 -2,9 -5,17 " /> <path stroke-width="7" d="M293,375c-3,8 -4,8 -8,17 -3,7 -3,6 -5,14 -2,9 -4,9 -3,19 " /> <path stroke-width="6" d="M277,425c0,9 -1,10 4,18 6,11 7,11 17,20 8,7 9,6 17,12 7,6 7,5 14,11 " /> <path stroke-width="7" d="M329,486c5,4 6,4 10,9 " /> <path stroke-width="8" d="M339,495c4,5 5,5 7,11 " /> <path stroke-width="7" d="M346,506c1,8 3,10 -1,17 -7,13 -8,15 -21,25 " /> <path stroke-width="6" d="M324,548c-16,13 -17,12 -36,21 -15,7 -15,7 -31,11 -12,3 -12,3 -25,3 -9,1 -10,0 -18,-3 " /> <path stroke-width="7" d="M214,580c-7,-2 -9,-2 -12,-7 -4,-10 -6,-13 -2,-23 " /> <path stroke-width="6" d="M200,550c6,-18 9,-19 21,-35 14,-16 13,-17 31,-29 40,-28 48,-29 84,-50 " /> <path stroke-width="8" d="M460,347c0,0 0,0 0,0 " /> <path stroke-width="9" d="M460,347c1,12 1,12 3,24 " /> <path stroke-width="7" d="M463,371c2,18 2,18 5,36 " /> <path stroke-width="6" d="M468,407c4,20 4,20 9,40 2,14 3,14 6,28 1,8 1,8 2,16 " /> <path stroke-width="8" d="M485,491c1,3 1,4 2,7 " /> <path stroke-width="11" d="M506,321c0,0 0,0 0,0 " /> <path stroke-width="14" d="M506,321c0,0 0,0 0,0 " /> <path stroke-width="10" d="M506,321c18,-11 17,-13 36,-22 " /> <path stroke-width="6" d="M542,299c21,-11 21,-13 44,-19 41,-11 41,-11 84,-15 17,-2 18,-3 35,1 13,3 13,4 24,12 10,6 11,6 17,16 9,12 10,13 14,28 5,16 4,17 4,33 -1,19 -2,20 -7,38 -5,18 -6,18 -14,34 -9,18 -9,17 -20,33 -4,6 -5,5 -10,10 " /> <path stroke-width="9" d="M570,321c0,0 0,0 0,0 " /> <path stroke-width="13" d="M570,321c0,0 0,0 0,0 " /> <path stroke-width="10" d="M570,321c-3,17 -3,17 -7,35 " /> <path stroke-width="6" d="M563,356c-3,10 -3,10 -6,20 " /> <path stroke-width="7" d="M557,376c-1,6 -2,6 -3,13 " /> <path stroke-width="8" d="M554,389c-1,3 -1,4 1,7 " /> <path stroke-width="10" d="M555,396c0,2 1,2 3,4 " /> <path stroke-width="12" d="M666,306c0,0 0,0 0,0 " /> <path stroke-width="13" d="M666,306c-1,2 -1,2 -2,4 " /> <path stroke-width="9" d="M664,310c-15,24 -15,24 -29,49 " /> <path stroke-width="6" d="M635,359c-8,12 -7,12 -15,25 -4,8 -5,8 -10,16 " /> <path stroke-width="7" d="M610,400c-4,7 -4,7 -8,14 " /> <path stroke-width="9" d="M602,414c0,1 0,1 -1,2 " /> <path stroke-width="12" d="M560,478c0,0 0,0 0,0 " /> <path stroke-width="14" d="M560,478c0,0 0,0 0,0 0,0 0,0 0,0 " /> <path stroke-width="10" d="M560,478c22,-7 22,-8 44,-15 " /> <path stroke-width="6" d="M604,463c30,-8 30,-8 60,-15 25,-5 26,-5 52,-9 10,-2 10,-2 20,-4 " /> </g> </svg>

opened by listeng 0
Library crashes on image load in RecyclerView.

The library throwing an IllegalStateException when trying to load svg images from String.

java.lang.IllegalStateException: Picture already recording, must call #endRecording() at android.graphics.Picture.beginRecording(Picture.java:83) at com.pixplicity.sharp.Sharp$SvgHandler.startElement(Sharp.java:1768) at org.apache.harmony.xml.ExpatParser.startElement(ExpatParser.java:147) at org.apache.harmony.xml.ExpatParser.appendBytes(Native Method) at org.apache.harmony.xml.ExpatParser.parseFragment(ExpatParser.java:517) at org.apache.harmony.xml.ExpatParser.parseDocument(ExpatParser.java:478) at org.apache.harmony.xml.ExpatReader.parse(ExpatReader.java:316) at org.apache.harmony.xml.ExpatReader.parse(ExpatReader.java:279) at com.pixplicity.sharp.Sharp$SvgHandler.read(Sharp.java:1328) at com.pixplicity.sharp.Sharp.getSharpPicture(Sharp.java:407) at com.pixplicity.sharp.Sharp.getSharpPicture(Sharp.java:429) at com.pixplicity.sharp.Sharp.getDrawable(Sharp.java:374) at com.pixplicity.sharp.Sharp.into(Sharp.java:325)

opened by behrinhalilov 0

Sharp doesn't properly fill in the color of a SVG rect

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="203.000000pt" height="61.000000pt" fill="#2900f5" viewBox="0 0 203.000000 61.000000" preserveAspectRatio="xMidYMid meet" style="width: 55px; height: 55px;"><g transform="translate(0.000000,61.000000) scale(0.100000,-0.100000)" stroke="none" style="width: 55px; height: 55px;"><path d="M25 585 l-25 -24 0 -256 0 -256 25 -24 24 -25 966 0 966 0 24 25 25
 24 0 256 0 256 -25 24 -24 25 -966 0 -966 0 -24 -25z m482 -97 c27 -25 29 -45
 7 -77 -15 -20 -22 -23 -63 -17 -40 5 -54 1 -106 -28 -84 -46 -83 -62 6 -109
 51 -28 74 -36 82 -28 29 29 97 -6 97 -49 0 -26 -34 -60 -62 -60 -28 0 -58 28
 -58 54 0 16 -18 31 -71 60 -65 35 -73 37 -96 25 -36 -19 -77 5 -81 48 -5 46
 21 67 73 59 35 -4 53 1 109 30 53 28 66 40 66 59 0 24 33 55 59 55 8 0 25 -10
 38 -22z" style="width: 55px; height: 55px;"></path></g><text x="75" y="26" font-weight="bold"  font-size="18px" fill="white">Deel</text><text x="75" y="46" font-weight="bold"  font-size="18px" fill="white">Contact</text></svg>

The svg shown above should be blue but its showing as the standard black. If i convert the svg to png it shows it correctly how can i solve this problem?

opened by Fmijsters 1

Too many logs

I'm implementing an app that refreshes the UI really often and it became almost impossible to read the logs since every svg that's display using Sharp prints 3 lines. I applied a filter on my IDE but my testers send me their unfiltered logs and I can't ask them to do that.

Is there any way I could limit the Logs? Or could you add a hide-flag to set globally?

PS: good job, the library works like a charm :D
enhancement

opened by micheledezanet 2

Owner

Pixplicity

GitHub

Polytech computer graphics couerse code scam script

Js-code-parser Polytech computer graphics couerse code scam script Копируйте строку скрипта с дебаггера с странички лабы. Вставляйте в файлик test.txt

2 Dec 18, 2022

Android Shared preference wrapper than encrypts the values of Shared Preferences. It's not bullet proof security but rather a quick win for incrementally making your android app more secure.

Secure-preferences - Deprecated Please use EncryptedSharedPreferences from androidx.security in preferenced to secure-preference. (There are no active