كيفية ترميز SVG يدويًا

في هذا البرنامج التعليمي، سنغطي جميع أساسيات ترميز SVG يدويًا. ستتعلم كيفية ترميز SVG من خلال الممارسة، وإنشاء ستة أيقونات بسيطة.

أيقونات SVG المرمزة يدويًا

هذا ما ستقوم بإنشائه:


<div class="grid">

<svg width="750" height="500">

<defs>

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</symbol>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

</defs>

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

</svg>

</div>


html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 850px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('https://assets.codepen.io/210284/grid_1.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 100%;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 500px;
  }
svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

ببضعة أسطر من التعليمات البرمجية، يمكنك الحصول على أيقونات مخصصة خاصة بك، وستعرف بالضبط كيف يتم تجميع كل واحدة منها. عندما تقوم بإنشاء SVG الخاصة بك، فإنك تضمن كتابتها بأكثر الطرق كفاءة، وتمتلك أقصى مستوى من التحكم عند استخدامها في مواقعك.

عناصر SVG الأساسية

يمكنك الدخول في تعقيدات كثيرة مع SVG، ولكن هذا ليس ضروريًا للأيقونات التي سنقوم بإنشائها. القائمة التالية تغطي اللبنات الأساسية التي سنحتاجها:

<svg> يحيط ويحدد الرسم بأكمله. <svg> هو للرسم المتجه القابل للتوسيع ما هو <html> للصفحة الويب.
<line> يقوم بإنشاء خطوط مستقيمة مفردة.
<polyline> يقوم بإنشاء خطوط متعددة المقاطع.
<rect> يقوم بإنشاء مستطيلات ومربعات.
<ellipse> يقوم بإنشاء دوائر وأشكال بيضاوية.
<polygon> يقوم بإنشاء أشكال ذات جوانب مستقيمة، بثلاثة جوانب أو أكثر.
<path> يقوم بإنشاء أي شكل تريده عن طريق تحديد النقاط والخطوط بينها.
<defs> يحدد الأصول القابلة لإعادة الاستخدام. لا شيء يتم وضعه داخل قسم <defs> هذا يكون مرئيًا في البداية. <defs> هو للرسم المتجه القابل للتوسيع ما هو <head> للصفحة الويب.
<g> يحيط بأشكال متعددة في مجموعة. ضع المجموعات في قسم <defs> لتمكين إعادة استخدامها.
<symbol> يشبه المجموعة، ولكن مع بعض الميزات الإضافية. عادة ما يتم وضعه في قسم <defs>.
<use> يأخذ الأصول المحددة في قسم <defs> ويجعلها مرئية في SVG.

أثناء قيامنا بإنشاء الأيقونات، سنعمل من خلال هذه القائمة من العناصر بالترتيب الذي نراه أعلاه.

ملفات البداية

قبل أن نبدأ، قم بتحميل ملفات البداية من مستودع GitHub. يمكنك إما تنزيل ملف .zip، أو استنساخ المستودع إلى نظامك.

سنبدأ بمستند يحتوي على بعض HTML وCSS الأساسية بالفعل. سيعطي هذا بعض التنسيقات لـ SVGs التي سنقوم بإنشائها، وسيجهزك أيضًا بشبكة صغيرة على الصفحة. سنقوم بإنشاء أيقوناتنا فوق هذه الشبكة، ونأمل أن تساعدك على تصور الإحداثيات التي تعمل بها عند وضع SVGs الخاصة بك.

عندما تفتح ملف "handcodedsvg.html" من مجلد "ملفات البداية"، يجب أن ترى ما يلي:

مقدمة سريعة عن قيم x و y

عند العمل في الفضاء ثنائي الأبعاد على موقع ويب، يتم تمثيل المحور الأفقي بـ x والمحور الرأسي بـ y. يتم تمثيل المواضع على كل من هذه المحاور بأرقام. إذا أردنا تحريك شيء إلى اليمين، سنحتاج إلى استخدام قيم x متزايدة، وللتحريك إلى اليسار سنستخدم قيم x متناقصة. وبالمثل، لتحريك شيء لأسفل سنستخدم قيم y متزايدة، وللتحريك لأعلى سنستخدم قيم y متناقصة.

اختصار شائع للتعبير عن قيم x و y لنقطة واحدة هو (x, y). على سبيل المثال، نقطة عند 10 على المحور x و 50 على المحور y يمكن كتابتها كـ (10, 50). سأستخدم هذا الاختصار من وقت لآخر في هذا البرنامج التعليمي.

لاحظ الخطين الأكثر قتامة على شبكتنا؟ سنقوم بوضع SVG بحيث تكون زاويته العلوية اليسرى محاذية للنقطة التي يتقاطعان فيها. وبالتالي، ستكون نقطة التقاطع هذه تمثل الموضع x = 0 و y = 0، أو (0,0)، في SVG الخاصة بنا.

شبكة الخلفية

يمثل كل من أخف الخطوط على الشبكة 10 بكسل، والخطوط متوسطة السماكة تمثل 100 بكسل. لذا إذا أردنا تحريك كائن لأسفل من خط متوسط السماكة إلى الخط التالي، سنزيد موقعه على المحور y بمقدار 100 بكسل.

إذا كان هذا لا يزال يبدو غير واضح، لا تقلق، كل هذا سيكون منطقيًا عندما نبدأ في إنشاء أيقونات SVG الخاصة بنا.

التنسيق الافتراضي لـ SVG

لاحظ أن في ملف HTML البدائي هناك بعض CSS المضمنة مع تنسيقات افتراضية لأيقونات SVG التي سنقوم بإنشائها:

css
svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

سيؤدي هذا إلى تعيين أيقوناتنا لعدم وجود تعبئة، وحدود سوداء بعرض 5 بكسل مع نهايات مستديرة.

إعداد SVG

الخطوة الأولى في إنشاء أي SVG هي وضع عنصر <svg></svg>. أي شيء تريد أن يعرضه SVG يجب أن يكون بين هذه العلامات. هناك بعض السمات التي يمكنك استخدامها على هذا العنصر، ولكننا سنبقي الأمور بسيطة ونستخدم فقط العرض والارتفاع.

أضف الكود التالي في قسم <body> من مستند HTML الخاص بك:

html
<svg width="750" height="500">
</svg>

سيقوم CSS في ملفنا البدائي بإزاحة هذا SVG لأسفل وإلى اليمين بمقدار 100 بكسل بحيث تكون زاويته العلوية اليسرى موضوعة عند نقطة تقاطع الخطين الأكثر قتامة على شبكة الخلفية. وقد تختلف القيم في CodePen طوال هذا البرنامج التعليمي قليلاً أيضًا – ولكن لا تتردد في اللعب بها.

إنشاء أيقونة "المحاذاة اليسرى"

لنبدأ باستخدام عنصر <line> لإنشاء أيقونة المحاذاة اليسرى:

عنصر الخط له أربع سمات ستحتاج إلى استخدامها:

x1 نقطة البداية الأفقية للخط
y1 نقطة البداية الرأسية للخط
x2 نقطة النهاية الأفقية للخط
y2 نقطة النهاية الرأسية للخط

لتلخيص ما سبق، تستخدم السمات x1 و y1 لتعيين مكان بدء الخط، والسمات x2 و y2 لتعيين مكان انتهاء الخط.

لننشئ أول خط في أيقونتنا، الخط الموجود في الأعلى. سنجعل الخط بطول 45 بكسل، ولكن الحدود التي نستخدمها بعرض 5 بكسل ستضيف بعض البكسلات الإضافية حول الخط. لذلك سنحتاج إلى إزاحة الخط لأسفل وإلى اليمين بمقدار 3 بكسل لضمان عدم قص أي من البكسلات الإضافية التي تم إنشاؤها بواسطة الحدود.

لهذا السبب، سنبدأ الخط عند موضع 3 على المحور x و 3 على المحور y. يمكننا تعيين نقطة بدء الخط هذه بـ (3,3) باستخدام السمات x1="3" y1="3".

نريد أن يكون الخط بطول 45 بكسل، لذا سنضيف 45 إلى موضع البداية x وهو 3، مما يعطينا 48 كقيمة نريد تعيينها لـ x2. نريد أن ينتهي الخط عند نفس الموضع على المحور الأفقي، لذا سنقوم بتعيين y2 ليكون 3، أي نفس القيمة التي أعطيناها لـ y1. سنضيف نقطة نهاية الخط هذه بـ (48,3) عبر السمات x2="48" y2="3".

الكود الكامل للخط الأول يجب أن يبدو كالتالي:

html
<line x1="3" y1="3" x2="48" y2="3"></line>

تحقق من معاينة المتصفح الخاصة بك، ويجب أن ترى خطًا أسودًا بطول 45 بكسل مع نهايات مستديرة.

الآن يمكننا المضي قدمًا وإضافة الخطوط الثلاثة التالية إلى أيقونتنا. نريد أن نحصل على أربعة خطوط في المجموع. يجب أن يكون الأول والثالث بطول 45 بكسل، والثاني والرابع بطول 62 بكسل. نريد أيضًا وجود فجوة رأسية بين كل منها بمقدار 16 بكسل.

يمكننا تحقيق ذلك بالكود التالي:

html
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

قيم y لكل خط تزداد تدريجيًا بمقدار 16 بكسل لإنشاء الفجوة الرأسية المطلوبة.

ألق نظرة أخرى على معاينة المتصفح الخاصة بك، ويجب أن ترى جميع الخطوط الأربعة. يمكنك أيضًا تعديل SVG مباشرة في هذا القلم:


<div class="grid">

  <svg width="600" height="300">
    
    <line x1="3" y1="3" x2="48" y2="3"></line>
    <line x1="3" y1="19" x2="65" y2="19"></line>
    <line x1="3" y1="35" x2="48" y2="35"></line>
    <line x1="3" y1="51" x2="65" y2="51"></line>
    
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

علق أيقوناتك أثناء تقدمنا

مع وضع هذا الكود، تم إنشاء أيقونتك الأولى بالفعل. نحن مستعدون للانتقال إلى إنشاء الأيقونة التالية، ونريد إنشاؤها في نفس الموضع على الشبكة، ولكن حاليًا أيقونة المحاذاة اليسرى في الطريق. لذلك، قم فقط بتعليق الكود الخاص بها لتحرير المساحة. سنعود لتعليقها لاحقًا عندما نحول أيقوناتنا إلى أصول قابلة لإعادة الاستخدام.

ستحتاج إلى فعل الشيء نفسه لكل أيقونة أثناء تقدمنا، قم بتعليقها بعد الانتهاء من إنشائها. لهذا السبب، من الجيد أيضًا إضافة ملاحظة صغيرة فوق الكود الخاص بكل أيقونة حتى تعرف أي منها عندما تعود إليها لاحقًا.

إنشاء أيقونة "السهم الأيمن"

لهذه الأيقونة، لنستخدم التطور التالي لعنصر <line>: <polyline>. سنستخدمه لإنشاء سهم يشير إلى اليمين.

عنصر <polyline> يحتوي على سمة واحدة فقط: points. هنا تستخدم أزواج من الأرقام لتعيين سلسلة من النقاط. سيتم رسم الخطوط تلقائيًا بينها. يتم كتابة أزواج الأرقام ببساطة واحدًا تلو الآخر داخل سمة points. لا يلزم الفصل بفواصل، ولكن يمكن تضمينها اختياريًا. لسهولة القراءة، قد ترغب أيضًا في وضع كل زوج من القيم في سطر خاص به في الكود الخاص بك.

سنبدأ polyline للسهم الأيمن من نفس النقطة التي بدأنا منها أيقونتنا الأخيرة، وهي (3,3) لضمان عدم قص الحدود والنهايات. نريد أن تتحرك النقطة الثانية إلى اليمين، ولأسفل بمقدار 25 بكسل، لذا سنقوم بتعيينها إلى (30,28). يجب أن تكون النقطة الثالثة محاذية رأسياً مع النقطة الأولى، وتتحرك لأسفل بمقدار 25 بكسل أخرى، لذا ستكون (3,53).

يمكننا إضافة هذه النقاط في سمة points الخاصة بـ polyline كما يلي:

html
<polyline points=" 
3 3 
30 28 
3 53 
"></polyline>

إذا كنت تريد كودًا أكثر إيجازًا، يمكنك أيضًا كتابة ما سبق كالتالي:

html
<polyline points="3 3, 30 28, 3 53"></polyline>

أو

html
<polyline points="3 3 30 28 3 53"></polyline>

ألق نظرة على معاينة المتصفح الخاصة بك، ويجب أن ترى أيقونة السهم الأيمن: تم إنشاء أيقونة أخرى بنجاح!


<div class="grid">

  <svg width="600" height="300">
    
    <polyline points="3 3 30 28 3 53"></polyline>
    
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

مرة أخرى، قم بتعليق هذه الأيقونة وأضف ملاحظة صغيرة حتى تعرف أي منها قبل الانتقال إلى الأيقونة التالية.

إنشاء أيقونة "المتصفح"

الآن بعد أن أتقنا الخطوط، لنقم بإنشاء بعض الأشكال، بدءًا من مستطيل (<rect>). سنستخدمه مع بضعة <line> لإنشاء أيقونة متصفح.

يمكن إنشاء المستطيلات والمربعات باستخدام عنصر <rect>، والذي يحتوي على أربع سمات ستحتاج إلى توفيرها:

x موضع الزاوية العلوية اليسرى على المحور x
y موضع الزاوية العلوية اليسرى على المحور y
width عرض الشكل
height ارتفاع الشكل

يمكنك أيضًا استخدام السمات rx و ry لإنشاء زوايا مستديرة إذا أردت.

سنقوم بإنشاء مستطيل مع إزاحة زاويته العلوية اليسرى بمقدار 3 بكسل في كلا الاتجاهين، مرة أخرى لتجنب قص الحدود، لذا سنستخدم السمات x="3" y="3". نريد أن يكون بعرض 80 بكسل وارتفاع 60 بكسل، لذا سنستخدم أيضًا السمات width="80" height="60".

وبالتالي، يجب أن يكون الكود الكامل للمستطيل كما يلي:

html
<rect x="3" y="3" width="80" height="60"></rect>

احفظ الكود الخاص بك وألق نظرة على معاينة المتصفح. يجب أن ترى مستطيلًا صغيرًا مرتبًا.

الآن كل ما نحتاج إليه هو إضافة خط أفقي عبر الجزء العلوي، وخط رأسي بالقرب من الزاوية العلوية اليسرى، كما ترى في الصورة في بداية هذا القسم. سنستخدم نفس عملية إنشاء الخط كما فعلنا من قبل، ويجب أن يبدو الكود الكامل لأيقونة المتصفح كما يلي:

html
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

خذ لحظة للنظر في الإحداثيات المقدمة في سمتي الخط، وربما قم بتغيير قيمها قليلاً حتى ترى كيف تعمل في هذه الأيقونة.


<div class="grid">

  <svg width="600" height="300">
    
    <rect x="3" y="3" width="80" height="60"></rect>
    <line x1="3" y1="19" x2="83" y2="19"></line>
    <line x1="20" y1="3" x2="20" y2="17"></line>
    
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

إنشاء أيقونة "التنبيه"

الآن بعد أن أتقنا إنشاء المستطيلات، لنجرب استخدام <ellipse>. سنستخدم اثنين منها، مع <line>، لإنشاء أيقونة التنبيه:

مثل المستطيلات، يتطلب عنصر <ellipse> أيضًا أربع سمات، ولكنها تختلف قليلاً عن تلك الخاصة بالمستطيلات. بدلاً من استخدام العرض والارتفاع، نحدد نصف قطر أفقي ورأسي. وبدلاً من تحديد موضع الزاوية العلوية اليسرى للشكل، نحدد مركزه:

cx موضع المركز على المحور x. فكر في "cx لمركز x".
cy موضع المركز على المحور y. فكر في "cy لمركز y".
rx حجم نصف القطر على المحور x، أي ارتفاع الشكل مقسومًا على النصف. فكر في "rx لنصف قطر x".
ry حجم نصف القطر على المحور y، أي عرض الشكل مقسومًا على النصف. فكر في "ry لنصف قطر y".

نريد دائرة مثالية بعرض 80 بكسل وارتفاع 80 بكسل، مما يعني أننا بحاجة إلى أن يكون نصف قطرها 40 بكسل على كلا المحورين. سنقوم بتعيين ذلك باستخدام السمات rx="40" ry="40".

نريد أيضًا أن تجلس الدائرة محاذية للخطوط الأكثر قتامة على الرسم البياني الخاص بنا. نظرًا لأن الدائرة ستكون بعرض وارتفاع 80 بكسل، فإن ذلك سيضع نقطة مركزها عند 40 بكسل. نحتاج أيضًا إلى السماح بإزاحة 3 بكسل لتجنب القص، لذا فإن نقطة مركز الدائرة يجب أن تكون عند 43 بكسل على كلا المحورين. سنقوم بتعيين ذلك باستخدام السمات cx="43" cy="43".

بجمع كل ذلك، نحصل على هذا الكود:

html
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

تحقق من معاينة المتصفح الخاصة بك، ويجب أن ترى الآن دائرة على صفحتك.

سنقوم بإضافة دائرة ثانية الآن، لإنشاء النقطة في الجزء السفلي من علامة التعجب. سنقوم بإنشاء هذا بنفس الطريقة، والفرق الوحيد هو أننا سنستخدم نمطًا مضمنًا لتعيين التعبئة إلى الأسود:

html
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

أخيرًا، نحتاج فقط إلى إضافة خط لإنشاء الجزء الآخر من علامة التعجب. مرة أخرى نستخدم نفس التقنيات كما في الخطوط الأخرى التي استخدمناها حتى الآن، مع الاختلاف الوحيد هو أننا سنستخدم نمطًا مضمنًا لزيادة عرض الحدود من 5 بكسل إلى 8 بكسل.

الكود الكامل لأيقونة التنبيه هو كما يلي:

html
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>


<div class="grid">

  <svg width="600" height="300">
    
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
    <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
    
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

إنشاء أيقونة "التشغيل"

الآن بعد أن أتقنا الأشكال الثابتة نسبيًا مثل المستطيلات والدوائر، نحن مستعدون لإنشاء أشكالنا الخاصة باستخدام عنصر <polygon>. يمكننا إنشاء أي شكل متعدد الأضلاع نريده باستخدام هذا العنصر، من ثماني الأضلاع إلى النجوم. ومع ذلك، سنبقي الأمور بسيطة الآن وننشئ مثلثًا. سنقوم بدمجه مع <ellipse> لإنشاء أيقونة تشغيل:

عنصر <polygon> يشبه إلى حد كبير عنصر <polyline>. يحتوي أيضًا على سمة واحدة فقط، points، حيث تستخدم أزواجًا من القيم لتعيين كل نقطة تشكل الشكل. الفرق هو أنه بينما يبقى polyline مفتوحًا، فإن polygon سيغلق نفسه تلقائيًا.

لنبدأ بوضع الدائرة التي سيجلس فيها المضلع. سنستخدم نفس القطع الناقص الذي استخدمناه في أيقونة التنبيه:

html
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

الآن لننشئ المضلع الخاص بنا. سنقوم بوضع ثلاث نقاط، وسيتم إنشاء الخطوط تلقائيًا بين هذه النقاط لإنشاء مثلث. النقاط ستكون (35,23)، (60,43) و (35,63). وبالتالي، سيكون كود المضلع الخاص بنا:

html
<polygon points="35 23, 60 43, 35 63" />

والكود الكامل لأيقونة التشغيل هو:

html
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />


<div class="grid">

  <svg width="600" height="300">
    
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <polygon points="35 23, 60 43, 35 63" />
      
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

إنشاء أيقونة "التنزيل"

الآن سننتقل إلى أكثر الوسائل تعقيدًا، ولكن في نفس الوقت الأكثر مرونة لإنتاج أشكال SVG، وهو عنصر <path>. إنشاء مسار يشبه إلى حد ما إنشاء مضلع، حيث تقوم بإنشاء الشكل قطعة قطعة. ومع ذلك، مع المسار تقوم بإنشاء كل نقطة وكل خط بنفسك دون أتمتة، ولديك أيضًا خيار إنشاء منحنيات بين النقاط بدلاً من الخطوط المستقيمة.

يمكن استخدام المسار لإنشاء أي شيء تقريبًا، ولكن بعد مستوى معين من التعقيد، لا يزال من الأفضل استخدام تطبيق تصميم متجه بدلاً من الترميز اليدوي. لهذا السبب، سنركز على مجموعة فرعية صغيرة من وظائف المسار، ونستخدمها لإنشاء أيقونة التنزيل هذه:

تقنيًا، يمكنك إنشاء الشكل أعلاه باستخدام مضلع، ولكن هذا السهم سيعطينا طريقة جيدة لفهم كيفية عمل عنصر المسار.

سنستخدم فقط واحدة من سمات <path>، وهي d. الحرف d يعني "data"، وهنا ستحدد جميع النقاط والخطوط الخاصة بمسارك. داخل هذه السمة، يتم توفير الأوامر لتعيين نقاط المسار وإنشاء الخطوط بينها عبر أحرف مفردة مثل M أو L، متبوعة بمجموعة من إحداثيات x و / أو y.

هناك عدة أوامر، ولكن لإعطائك مقدمة للعمل مع <path>، سنلتزم ببعض الأوامر التي يمكن استخدامها بشكل واقعي عند الترميز اليدوي. وهي كما يلي:

M يمثل "moveto". يبدأ مسارًا جديدًا في موضع معين، يتم تعريفه بقيم x و y. تخيل أن هذا يشبه تحريك مؤشر الفأرة فوق نقطة على لوحتك، جاهزًا للرسم. الحرف الكبير M يشير إلى الانتقال إلى مجموعة مطلقة من الإحداثيات. (الحرف الصغير m يشير إلى إحداثيات نسبية).
L يمثل "lineto". يرسم خطًا من الموضع الحالي إلى موضع جديد. الحرف الكبير L يشير إلى الانتقال إلى مجموعة مطلقة من الإحداثيات. (الحرف الصغير l يشير إلى إحداثيات نسبية).
Z يمثل "closepath". يحول المسار إلى شكل مغلق عن طريق رسم خط مستقيم بين النقطة الحالية والنقطة الأولى التي تم إنشاؤها في المسار.

يجب أن تعتبر هذه الأوامر الثلاثة، (والأيقونة التي سننشئها بها)، مقدمة تمهيدية لعنصر <path>. للاستفادة القصوى منه، ستحتاج إلى التعرف على جميع الأوامر المتاحة لك.

ترميز أيقونة التنزيل

لترميز أيقونة التنزيل الخاصة بك، أوصي أولاً بإضافة عنصر المسار الفارغ:

html
<path d=" 
"></path>

من هنا، أضف كل أمر واحدًا تلو الآخر، واحفظ وشاهد تقدم الشكل حتى ترى كيف يتم إنشاؤه. أوصي أيضًا بوضع كل أمر في سطر خاص به لسهولة القراءة.

أولاً، نريد الانتقال إلى (18,3)، النقطة التي نريد أن يبدأ منها سهمنا. للقيام بذلك، سنضيف الأمر M 18 3 إلى سمة d الخاصة بمسارنا.

بعد ذلك، نريد استخدام الأمر L لإنشاء خط يرسم من نقطة بدء المسار على طول المحور x بمقدار 28 بكسل. للقيام بذلك، دعنا نضيف أمرنا الثاني: L 46 3. تحقق من المعاينة الخاصة بك، ويجب أن ترى خطًا أفقيًا صغيرًا.

الآن لنرسم خطًا مستقيمًا لأسفل بمقدار 37 بكسل بإضافة L 46 40.

ثم مباشرة إلى اليمين بمقدار 15 بكسل مع L 61 40

بعد ذلك، علينا البدء في إنشاء رأس السهم. نحتاج إلى رسم خط قطريًا لأسفل وإلى اليسار. سنفعل ذلك مع L 32 68.

ثم سنرسم خطًا قطريًا لأعلى وإلى اليسار مع L 3 40.

الآن سننتهي من رأس السهم عن طريق الرسم إلى اليمين مرة أخرى مع L 18 40.

لإغلاق الشكل الخاص بنا، لا نحتاج إلى تحديد نقطة لرسم خط إليها. كل ما نحتاجه هو إضافة الأمر Z، والذي سيغلق الشكل تلقائيًا.

يجب أن يبدو الكود النهائي لمسار السهم كما يلي:

html
<path d=" 
M 18 3 
L 46 3 
L 46 40 
L 61 40 
L 32 68 
L 3 40 
L 18 40 
Z 
"></path>

لمزيد من المعلومات حول العمل مع <path>، تحقق من المراجع في أسفل الصفحة.


<div class="grid">

  <svg width="600" height="300">
    
    <path d="
              M 18 3
              L 46 3
              L 46 40
              L 61 40
              L 32 68
              L 3 40
              L 18 40
              Z
            "></path>
      
  </svg>
  
</div>


html {  
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/grid.png');
}  

.grid {
    padding: 100px 0 0 100px;
  }
  html::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    height: 100%;
  }
  html::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
  }
  svg {
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

إضافة عنصر `<defs>`

لقد انتهينا من ترميز أيقوناتنا الست، لذا يمكننا الآن تجهيزها لوضعها وإعادة استخدامها في SVG الخاصة بنا.

للقيام بذلك، سنقوم بلف الكود الخاص بجميع أيقوناتنا، (التي تم تعليقها حاليًا)، بعلامات <defs></defs>:

html
<defs>
<!-- كل الأيقونات التي قمت بإنشائها حتى الآن تذهب هنا -->
</defs>

يخبر هذا النظام أن جميع الأيقونات التي أنشأناها ستكون مخفية افتراضيًا، حتى نستخدمها بشكل صريح.

يمكنك الآن إلغاء تعليق كل أيقونة من أيقوناتك ولن يتم رؤيتها على الصفحة.

إنشاء مجموعات باستخدام `<g>`

هناك طريقتان يمكننا من خلالهما جعل أيقوناتنا جاهزة للاستخدام: عن طريق تحويلها إلى مجموعات، أو إلى رموز. سنحول النصف الأول من الأيقونات إلى مجموعات، والنصف الثاني إلى رموز حتى نتمكن من توضيح الفرق.

لتحويل أيقونة من أيقوناتنا إلى مجموعة، كل ما علينا فعله هو لفها بعلامات <g></g>. لجعل هذه المجموعة قابلة للاستخدام، نحتاج أيضًا إلى إعطائها معرفًا فريدًا.

على سبيل المثال:

html
<g id="leftalign">
<!-- أيقونة المحاذاة اليسرى المصنوعة من الخطوط -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

لف كل أيقونة من أيقوناتك الثلاث الأولى بعلامات <g></g> وأضف معرفات فريدة، كما يلي:

html
<g id="leftalign">
<!-- أيقونة المحاذاة اليسرى المصنوعة من الخطوط -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
<g id="rightcaret">
<!-- أيقونة السهم الأيمن المصنوعة من polyline -->
<polyline points=" 
3 3 
30 28 
3 53 
"></polyline>
</g>
<g id="browser">
<!-- أيقونة المتصفح المصنوعة من مستطيل وخطوط -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

وضع المجموعات باستخدام `<use>`

لدينا الآن ثلاث أيقونات محددة كمجموعات في عنصر <defs> الخاص بنا، لذا نحن مستعدون لاستخدامها في SVG الخاصة بنا. لتحقيق ذلك، كل ما نحتاجه هو إضافة عنصر <use>، (مع التأكد من إضافته بعد وخارج عنصر <defs>)، وتعيين سمة href لاستهداف معرف الأيقونة المطلوبة.

على سبيل المثال، لاستخدام أيقونة المحاذاة اليسرى، أضف هذا الكود:

html
<use href="#leftalign"></use>

لوضع الأيقونة في مكان محدد، أضف سمات x و y:

html
<use href="#leftalign" x="100" y="100"></use>

الكود لإضافة جميع الأيقونات الثلاث وفصلها سيبدو كالتالي:

html
<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>

تحقق من المتصفح الخاص بك، ويجب أن ترى جميع الأيقونات الثلاث الأولى:

إنشاء رموز باستخدام `<symbol>`

بدلاً من استخدام المجموعات لتحديد أيقوناتك، يمكنك أيضًا استخدام الرموز. الرموز تشبه إلى حد كبير المجموعات، ولكنك تحصل على إعدادات إضافية للتحكم في viewbox ونسبة العرض إلى الارتفاع.

يمكن أن يكون هذا مفيدًا جدًا إذا كنت تريد القيام بأشياء مثل توسيط الأيقونات التي أنشأناها حتى الآن. سنحول الأيقونات الثلاث المتبقية إلى رموز، ثم نقوم بتعديلها بحيث تملأ مساحة بارتفاع 100 بكسل عموديًا، وتكون متمركزة أفقيًا في تلك المساحة.

نقوم بإنشاء رموزنا بنفس الطريقة التي ننشئ بها مجموعاتنا، فقط سنقوم بلف الكود الخاص بكل أيقونة من أيقوناتنا الثلاث الأخيرة بعلامات <symbol></symbol>. سنحتاج أيضًا إلى إضافة معرف فريد لكل منها.

ومع ذلك، ما سنقوم بإضافته أيضًا هو سمة viewBox. سيسمح لنا هذا بتحديد الجزء المرئي من كل رمز. عندما يكون المتصفح لديه إمكانية الوصول إلى هذه المعلومات، يمكنه بعد ذلك تحجيم الرموز ومحاذاتها بشكل صحيح.

سنحتاج إلى إعطاء سمة viewBox أربع قيم. القيمتان الأوليان ستحددان النقطة العلوية اليسرى لأيقونتنا، والثالثة والرابعة تحدد عرضها وارتفاعها على التوالي.

بدءًا من أيقونة "التنبيه"، عرضها وارتفاعها كلاهما 86 بكسل، لذا سنقوم بتعيين viewBox لها إلى 0 0 86 86 كما يلي:

html
<symbol id="alert" viewBox="0 0 86 86">
<!-- أيقونة التنبيه المصنوعة من القطع الناقصة والخط -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

أيقونة "التشغيل" أيضًا بعرض وارتفاع 86 بكسل، وأيقونة "التنزيل" بعرض 64 بكسل وارتفاع 71 بكسل. يجب أن يكون الكود المقابل لرموزنا كما يلي:

html
<symbol id="alert" viewBox="0 0 86 86">
<!-- أيقونة التنبيه المصنوعة من القطع الناقصة والخط -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
<symbol id="play" viewBox="0 0 86 86">
<!-- أيقونة التشغيل المصنوعة من القطع الناقص والمضلع -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>
<symbol id="download" viewBox="0 0 64 71">
<!-- أيقونة التنزيل المصنوعة من المسار -->
<path d=" 
M 18 3 
L 46 3 
L 46 40 
L 61 40 
L 32 68 
L 3 40 
L 18 40 
Z 
"></path>
</symbol>

وضع الرموز باستخدام `<use>`

يمكننا الآن استخدام أيقونات الرموز الخاصة بنا بنفس الطريقة التي استخدمنا بها المجموعات. ومع ذلك، سنقوم أيضًا بتزويد كل منها بسمات العرض والارتفاع بقيمة 100:

html
<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>

سترى أن كل واحدة من أيقونات الرموز الخاصة بك تملأ وتتمحور بشكل أنيق في مساحتها البالغة 100 بكسل × 100 بكسل:

جرب تطبيق سمات العرض والارتفاع على عناصر <use> لأحد أيقونات المجموعات الخاصة بك. ستلاحظ أن لا شيء يتغير. هذا لأن المتصفح يعتمد على قيم viewBox، (التي لا يمكن أن تكون موجودة في المجموعة)، لمعرفة كيفية تحجيم الأيقونات.

الخلاصـــة

هذا يغطي أساسيات ترميز SVG يدويًا! دعونا نلخص ما تعلمناه:

قم بإعداد عنصر <svg> الخاص بك ليحيط بالرسم بأكمله.
استخدم <line> و <polyline> لإنشاء الخطوط.
استخدم <rect> و <ellipse> و <polygon> لإنشاء الأشكال المغلقة.
استخدم <path> لإنشاء أي شيء تريده.
قم بتجميع الأشكال مع عنصر <g>.
للسلوك الشبيه بالمجموعات مع ميزات إضافية، استخدم <symbol>.
استخدم عنصر <defs> لتحديد أي رموز ومجموعات قابلة لإعادة الاستخدام.
ضع الرموز والمجموعات المعرفة باستخدام عنصر <use>.

لقد تعلمنا بعض الأساسيات القوية في هذا البرنامج التعليمي، ولكن هناك الكثير الذي يمكنك فعله باستخدام SVG، لذا لا تتوقف هنا، استمر في البحث واكتشاف المزيد من الأشياء الرائعة التي يمكن تحقيقها!

في الوقت الحالي، نأمل أنك لم تعد تشعر بالاعتماد الكامل على تطبيقات التصميم المتجه لإنشاء SVG الخاصة بك، وأنك واثق من إنتاج بعض الرسومات الخاصة بك يدويًا. بالنسبة للرسومات الأكثر تعقيدًا، لا تزال تطبيقات التصميم هي الطريقة المثلى، ولكن هناك الكثير الذي يمكنك فعله باستخدام اللبنات الأساسية التي لديك تحت تصرفك، مع الاستفادة من السرعة والتحكم الذي يأتي مع الترميز اليدوي.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

كيف تنشئ رسومات SVG متجهية بدقة عالية

كيفية ترميز SVG يدويًا

أيقونات SVG المرمزة يدويًا

عناصر SVG الأساسية

ملفات البداية

مقدمة سريعة عن قيم x و y

شبكة الخلفية

التنسيق الافتراضي لـ SVG

إعداد SVG

إنشاء أيقونة "المحاذاة اليسرى"

علق أيقوناتك أثناء تقدمنا

إنشاء أيقونة "السهم الأيمن"

إنشاء أيقونة "المتصفح"

إنشاء أيقونة "التنبيه"

إنشاء أيقونة "التشغيل"

إنشاء أيقونة "التنزيل"

ترميز أيقونة التنزيل

إضافة عنصر `<defs>`

إنشاء مجموعات باستخدام `<g>`

وضع المجموعات باستخدام `<use>`

إنشاء رموز باستخدام `<symbol>`

وضع الرموز باستخدام `<use>`

الخلاصـــة

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

كيفية إنشاء صندوق ملاحظات ملون على مدونة

طريقة حذف الرمز ?m=1 في رابط مدونتك أو موقعك على بلوجر

اهم مكتبات خطوط لمدونات بلوجر

تصميم مبتكر تثبيت العناصر في بلوجر بخطوات بسيطة

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

استكشف في مدونة أوعي وشك عالم الابتكار

كيف تنشئ رسومات SVG متجهية بدقة عالية

كيفية ترميز SVG يدويًا

أيقونات SVG المرمزة يدويًا

عناصر SVG الأساسية

ملفات البداية

مقدمة سريعة عن قيم x و y

شبكة الخلفية

التنسيق الافتراضي لـ SVG

إعداد SVG

إنشاء أيقونة "المحاذاة اليسرى"

علق أيقوناتك أثناء تقدمنا

إنشاء أيقونة "السهم الأيمن"

إنشاء أيقونة "المتصفح"

إنشاء أيقونة "التنبيه"

إنشاء أيقونة "التشغيل"

إنشاء أيقونة "التنزيل"

ترميز أيقونة التنزيل

إضافة عنصر <defs>

إنشاء مجموعات باستخدام <g>

وضع المجموعات باستخدام <use>

إنشاء رموز باستخدام <symbol>

وضع الرموز باستخدام <use>

الخلاصـــة

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

اوعي وشك

إضافة عنصر `<defs>`

إنشاء مجموعات باستخدام `<g>`

وضع المجموعات باستخدام `<use>`

إنشاء رموز باستخدام `<symbol>`

وضع الرموز باستخدام `<use>`