Delete padding or Force fitting or Delete empty space from square Vector asset to Fit a Rectangular button?

Question

I'm trying to adjust the all_inclusive svg image to my rectangular button. The shape itself is rectangular as well but the vector asset is square (24x24) with white spaces above and under the shape. These spaces force the shape itself to be very small. How to make the all inclusive svg rectangular by deleting that padding on top and on bottom?

In this picture the image is set to fit the guidelines on the left, top and right side:

    <ImageView
        android:id="@+id/imgInfinity"
        app:srcCompat="@drawable/ic_infinity"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="0.75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="0.75"
        app:layout_constraintEnd_toEndOf="0.25" />

Things that did not work:

• pivot vector asset with a group -> I just cant figure out the dimensions without messing up the original shape. Same storty with scaleX/Y or translateX/Y. I got it to work on my other buttons with simpler shapes though.
• adjusting android:viewportheight or android:height -> it deshapes the picture to a weird form
• crop svg online --> as Googles original SVG pathData is already 580 characters long, cropping tools only make it to large for android to deal with (above 1000 charactes)
• crop svg picture with word and extract from zip file-> it doesnt compress svg images so it stays rectangular with the white spaces above and under.
• Set a seperate horizontal guideline for the top of the picture. It does the trick but one or multiple guidelines for each image gets very messy. There must be a better way, right?..

ACCEPTED SOLUTION (edit with InkShape):

• Install InkShape
• Open SVG
• Click on picture once to select it
• Go to File-> Document Properties and click 'Resize pager to drawing or selection' (this button is hidden on the first tab, click +Resize page to content to show the option);
• Save
• extract pathData and (viewport)width/heights from saved file.

Answer 1

The viewportHeight attribute defines the size of the "canvas" that the path is drawn on (i.e., it defines what the coordinates in the path data actually "mean").

The height attribute defines the intrinsic size of the drawable.

The original vector has 6.5 units (in the viewport) of white space at the top and the bottom. That means that you can look for any pathData command that uses a capital letter, and subtract 6.5 from the y coordinate. That leaves you with this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="13dp"
        android:viewportWidth="24.0"
        android:viewportHeight="13.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M18.6,0.12c-1.44,0 -2.8,0.56 -3.77,1.53L12,4.16 10.48,5.5h0.01L7.8,7.89c-0.64,0.64 -1.49,0.99 -2.4,0.99 -1.87,0 -3.39,-1.51 -3.39,-3.38S3.53,2.12 5.4,2.12c0.91,0 1.76,0.35 2.44,1.03l1.13,1 1.51,-1.34L9.22,1.7C8.2,0.68 6.84,0.12 5.4,0.12 2.42,0.12 0,2.54 0,5.5s2.42,5.38 5.4,5.38c1.44,0 2.8,-0.56 3.77,-1.53l2.83,-2.5 0.01,0.01L13.52,5.5h-0.01l2.69,-2.39c0.64,-0.64 1.49,-0.99 2.4,-0.99 1.87,0 3.39,1.51 3.39,3.38s-1.52,3.38 -3.39,3.38c-0.9,0 -1.76,-0.35 -2.44,-1.03l-1.14,-1.01 -1.51,1.34 1.27,1.12c1.02,1.01 2.37,1.57 3.82,1.57 2.98,0 5.4,-2.41 5.4,-5.38s-2.42,-5.37 -5.4,-5.37z"/>
</vector>

Then, once the whole shape has been moved "up" by 6.5 units, you can subtract 11 (6.5 * 2) from both the viewport and the intrinsic height.

The end result is a 24x13dp shape, which should scale much better in wide views.