Home / Questions / 37539
Accepted
Francisco Romero
Asked: 2020-12-05 18:03:51 +0800 CST 2020-12-05 18:03:51 +0800 CST

How can I create an svg file?

  • 772

I have a svgcreated in an HTML page.

For example, for simplicity, we can take this simple example:

<svg>
  <circle r="60px" fill="red" cx="90" cy="65"></circle>
</svg>

And I would like to be able to use it on Android. I have seen that what can be done for this is to create a file svgand import it, however, I do not know how to create that file and in most places they tell me how to export an image to a file svg(that is, a conversion) but I I want to insert in a file svgthe svgone I show in the previous example.

Therefore, I have a couple of questions:

  • Does a file svghave to have a particular structure? As HTMLit has the following structure:

    <html><head></head><body></body></html>

  • If it does not have any particular structure, would it be entered svgas it is in the previous example? That is, would the be entered svgwith the same tags as in the HTML?

Thank you very much.

android

3 Answers

  1. You can try with the following code:

    <svg version="1.1"
     baseProfile="basic"
     xmlns="http://www.w3.org/2000/svg"
     width="120" height="120">
  <circle r="60px" fill="red" cx="90" cy="65"></circle>
</svg>

    The version can be 1.0, 1.1 or 1.2 (everything will depend on the properties of each element, if they are supported or not by the version you use). Also, 'baseProfile' is telling you to use the basic (which android surely supports). To start you have Mozilla Tutorial .

    • 2
  2. Best Answer

    Create .SVG file

    Base structure of an icon file .svgmodify <path...it with the stroke of the icon you want

    <svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="48" height="48">
   <path d="M 21 1.90625 L 18.46875 4.4375 C 16.708893 2.9398748 14.471062 2 12 2 C 6.4666667 2 2 6.4666667 2 12 C 2 17.533333 6.4666667 22 12 22 C 17.533333 22 22 17.533333 22 12 L 20 12 C 20 16.466667 16.466667 20 12 20 C 7.5333333 20 4 16.466667 4 12 C 4 7.5333333 7.5333333 4 12 4 C 13.922816 4 15.66022 4.6972027 17.0625 5.84375 L 14.90625 8 L 21 8 L 21 1.90625 z"></path>
</svg>

    Import .SVG file

    To use a svgin an Android project, you must convert it to vector drawablesfor that, you place yourself above the directory Drawablesin Android-Studioopen the context menu and selectNew->Vector Asset

    enter image description here

    A dialog box will open, where you can upload your custom svg:

    ChooseLocal Files

    • Name: identifier to be able to refer to as a normal drawable.
    • Path: svg path
    • Size: define the default size, normally it's 24x24yes for button icons, you can always resize it directly with widthy heightof the component.

    enter image description here

    Official Documentation Create drawable interfaces in vector

    Modify its color

    To change the color, once passed the .svga vector-drawablein your .xml inside the directory drawableyou can specify fillColorwith value ARGB.

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1s3.1,1.39 3.1,3.1v2L8.9,8L8.9,6zM18,20L6,20L6,10h12v10z"/>
</vector>
    • 2

  3. The files svgdo not have a fixed structure. Being a labeling file when there is no marked label, they take a default data.

    As many forms as necessary can be added, taking care that the identifiers do not coincide and create ambiguities.

    NOTE: If you want to combine several different elements, svgyou must be careful not to have unexpected results (for example, if one element has a size marked that, compared to the size marked by the other, there is a huge difference that makes practically missing one, or giving overlapping default values)

    • 1