Other graphics types about capacitor-assets HOT 25 CLOSED

Thanks @tajnymag, will take a look at this. I'm also going to be adding support for SVG image types assuming I don't hit any hurdles there as sharp supports them.

from capacitor-assets.

Yes, it does. Perhaps it's worth mentioning in the README.

from capacitor-assets.

Do you have documentation I can refer to?

from capacitor-assets.

@dwieeb This seems to be official and includes the neccessary Android asset resolution information.

To be honest, I can't find anything official for iOS

from capacitor-assets.

Yeah it's weird, I can't seem to find any Cordova documentation on adding drawables at different densities for Android. How is this usually accomplished? It seems <resource-file doesn't work with densities. Is that correct?

Full android docs: https://developer.android.com/guide/topics/resources/providing-resources

from capacitor-assets.

It actually works pretty well. seems to work like a dumb copy function, so you generate the assets and then copy it in the native platforms res/ directory.

For example, here I provide Android with @drawable/material_search

<resource-file src="resources/android/material_search.xml" target="app/src/main/res/drawable/material_search.xml" />

(fully working on Ionic 4 with Cordova 9)

from capacitor-assets.

I'm assuming resources/android/material_search.xml is an xml file containing a single ImageView? Would you mind sharing it? I'm having difficulty finding examples that make use of the densities.

from capacitor-assets.

Contents of materia_search.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
        android:viewportWidth="24"
        android:viewportHeight="24"
        android:width="24dp"
        android:height="24dp">
    <path
            android:pathData="M15.5 14h-0.79l-0.28 -0.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09 -0.59 4.23 -1.57l0.27 0.28v0.79l5 4.99L20.49 19l-4.99 -5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            android:fillColor="#000000" />
</vector>

from capacitor-assets.

But that's a vector. How can cordova-res help with that example?

from capacitor-assets.

Oh, sorry. The source svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

cordova-res could still copy vector to it's appropriate native location though.

from capacitor-assets.

I think I understand. Given a Source SVG, you want the following to happen:

1. Transform SVG to Android Vector in XML and place the file in an appropriate place (resources/android/xml/drawable/<file>.xml, for example)
2. Register the new resource in config.xml for use in the Cordova project

Is this correct?

from capacitor-assets.

Yes, it is correct.

from capacitor-assets.

I think that's reasonable!

But was there anything to be done for raster images? You mentioned resizing in the original post.

from capacitor-assets.

Also yes, raster images could be resized the same way icons and splash-screens are resized and put in the appropriate folders.

from capacitor-assets.

In that case I'm still missing what the resource-file looks like for a raster image and how it references each density. Do you have any examples or documentation I can refer to?

from capacitor-assets.

<resource-file> isn't aware of density. You have to add it with each density separately.

for example:

<resource-file src="resources/android/drawable-ldpi/material_search.png" target="app/src/main/res/drawable-ldpi/material_search.png" />
<resource-file src="resources/android/drawable-hdpi/material_search.png" target="app/src/main/res/drawable-hdpi/material_search.png" />

Drawable folder structure: https://developer.android.com/guide/topics/resources/providing-resources

from capacitor-assets.

I think I understand. Given a Source SVG, you want the following to happen:

1. Transform SVG to Android Vector in XML and place the file in an appropriate place (`resources/android/xml/drawable/<file>.xml`, for example)

2. Register the new resource in `config.xml` for use in the Cordova project

Is this correct?

Probably better to put it in a different folder than "resources/android/xml" as it feels like it isn't a config file. I'd expect VectorDrawable to be placed in fex. "resources/android/drawable". If it's an icon, it should be as usual in "resources/android/icon"

from capacitor-assets.

Ahhh, okay! I get it.

Yeah I think putting these in resources/android/drawable makes sense.

from capacitor-assets.

2. Register the new resource in config.xml for use in the Cordova project

Does this tool update config.xml? (I didn't glean that from the README.md, but it would be nice if it did, I can create a separate issue for it.)

from capacitor-assets.

+1

from capacitor-assets.

Is this relevant with Capacitor? We aren't supporting Cordova in the 1.0 release so not sure if this should be closed or also looked at

from capacitor-assets.

Is this relevant with Capacitor? We aren't supporting Cordova in the 1.0 release so not sure if this should be closed or also looked at

It might be. As long as the resources where copied to the appropriate native locations, we would have less work to do through Xcode and Android Studio.

from capacitor-assets.

I just wonder when the SVG support is going to arrive. I am using online conversion tools for android specifically right now

from capacitor-assets.

SVG support is now in @capacitor/assets. Closing this for now until I have a better idea of whether this issue still applies with the new tool

from capacitor-assets.

@mlynch Great news! Is there any documentation on how to use this tool with an SVG source?

There isn't anything in the readme, only PNG/JPG is mentioned.

Also, you may be able to close these, they seem to be about SVG:

• #39
• #208

from capacitor-assets.