(SVG)-(Scalable Vector Graphics) أو الرسومات القابلة للتحجيم، هي عبارة عن تنسيق بيانات مصمم لوصف الرسوم الموجهة (vectoriel) و المستندة إلى (XML).

تم تحديد هذا التنسيق المستوحى مباشرة من (VML) و (PGML) بواسطة اتحاد شبكة الويب العالمية (World Wide Web Consortium).

يتضمن اندرويد ستوديو أداة تسمى (Vector Asset Studio) تتيح لك إضافة مواد الايقونات واستيراد ملفات (SVG) و (PSD) كموارد موجهة (Vectoriel). يؤدي استخدام الملفات الموجهة بدلاً من الصور النقطية (Bitmaps) إلى تقليل حجم ملف (APK) نظرًا لأنه يمكن تغيير حجم الملف نفسه نحو كثافة شاشات مختلفة دون فقدان لجودة الصورة. بالنسبة لإصدارات الاندرويد القديمة والتي لا  تدعم الملفات الموجهة ، يمكن لـ (Vector Asset Studio) اثناء الإنشاء، تحويل العناصر الموجهة إلى أحجام نقطية مختلفة لكل كثافة شاشة.

  • أداة الرسوم الموجهة (Vector Asset Studio)

(Vector Asset Studio) عبارة عن أداة مدمجة بالاندرويد ستوديو، تقوم بانشاء ايقونات موجهة (vectoriel) بالاستعانة بمكتبة الايقونات المتواجدة بتطبيق الاندرويد أو من خلال ايقوناتك الخاصة.

لفتح هذه الأداة يرجى تتبع المسار كما في الصورة أدناه.

أداة اندرويد للرسوم الموجهة

سوف نلاحظ عند اضافتنا للأيقونة أنها تحولت إلى ملف (xml) ولهذا السبب تبقى جودة الصورة عالية رغم تغير حجم الشاشة التي سنفتح من خلالها التطبيق.

إذا كنت ترغب في تغيير لون الأيقونة، انقر نقرًا مزدوجًا فوق الملف في مجلد (drawable)، لتحصل على كود الاكسمل للأيقونة.

 

وإضافة الايقونة في ملف (activity_main.xml) مثلا، هي نفس الطريقة لإضافة أي صورة. مثال:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.androidhive.vectordrawable.MainActivity">

    <ImageView android:id="@+id/ic_logo"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="30dp"
        app:srcCompat="@drawable/ic_sentiment_satisfied_black_24dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:gravity="center_horizontal"
        android:text="Tap on icon to change tint color" />

</LinearLayout>