Logoمُرمِّز روابط SVG

مُرمِّز روابط SVG

إذا أردت فك ترميز SVG، يمكنك وضع SVG المشفّر هنا
معاينة

يمكن استخدام SVG في CSS كـ URL، لكن بدون ترميز لن يعمل على جميع المتصفحات.
إذا تم استخدام ترميز encodeURIComponent() على SVG، فسيعمل في كل مكان.

يجب أن يحتوي SVG على الخاصية xmlns: xmlns='http: //www.w3.org/2000/svg'.
إذا لم تكن موجودة، ستُضاف تلقائيًا

يمكن استخدام SVG المُرمَّز في background أو في border-image أو في mask (عرض تجريبي مباشر).

FAQ

ما هو SVG؟

SVG اختصار لـ Scalable Vector Graphics (رسومات متجهية قابلة للتحجيم). يُستخدم لتعريف الرسومات المتجهية على الويب بتنسيق XML. يمكن تحريك كل عنصر وخاصية في ملفات SVG.

كيفية استخدام SVG في CSS؟

لاستخدام كود SVG مباشرةً في CSS، تحتاج إلى ترميز الكود أولاً. يمكنك استخدام هذه الأداة أو دالة JavaScript encodeURIComponent() لإجراء ذلك. يمكن استخدام عنوان URI لبيانات SVG المُرمَّز مع خصائص CSS كـ background-image وborder-image وmask عبر دالة url(). مثال: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

كيفية تغيير لون SVG في CSS؟

لتغيير لون أي SVG، يمكنك الجمع بين خاصيتَي mask وbackground-color في CSS. المثال التالي سيغيّر لون SVG إلى الأزرق. مثال: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

ما هو URL؟

URL (محدد موقع الموارد الموحد) هو عنوان مورد فريد على الإنترنت. وهو أحد الآليات الرئيسية التي تستخدمها المتصفحات لاسترداد الموارد كصفحات HTML ومستندات CSS والصور وغيرها.

كيفية ترميز URL؟

لترميز URL يمكنك استخدام دالة encodeURIComponent()، التي ترمّز URI باستبدال كل تكرار لبعض الأحرف بتسلسلات هروب واحدة أو اثنتين أو ثلاث أو أربع تمثّل ترميز UTF-8 للحرف. مقارنةً بـ encodeURI()، ترمّز هذه الدالة عددًا أكبر من الأحرف، بما فيها تلك التي تشكّل جزءًا من بنية URI.

كيفية فك ترميز URL؟

لفك ترميز URL يمكنك استخدام دالة decodeURIComponent()، التي تفك ترميز URI بمعاملة كل تسلسل هروب بالشكل %XX كوحدة رمز UTF-8 واحدة (بايت واحد). في UTF-8، يدل عدد بتات 1 الأمامية في البايت الأول—والتي قد تكون 0 (لأحرف ASCII أحادية البايت) أو 2 أو 3 أو 4—على عدد البايتات في الحرف.

أمثلة على SVG المُرمَّز

في الخلفية
في القناع
في الحدود

جدول تحويل SVG إلى CSS

SVGCSS
<svg><circle r="50" cx="50" cy="50" fill="tomato"/><circle r="41" cx="47" cy="50" fill="orange"/><circle r="33" cx="48" cy="53" fill="gold"/><circle r="25" cx="49" cy="51" fill="yellowgreen"/><circle r="17" cx="52" cy="50" fill="lightseagreen"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3C/svg%3E");
<svg><rect x="10" y="10" width="30" height="30"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='30' height='30'/%3E%3C/svg%3E");
<svg><circle cx="25" cy="75" r="20"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='75' r='20'/%3E%3C/svg%3E");
<svg><ellipse cx="75" cy="75" rx="20" ry="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='75' cy='75' rx='20' ry='5'/%3E%3C/svg%3E");
<svg><line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' x2='50' y1='110' y2='150' stroke='black' stroke-width='5'/%3E%3C/svg%3E");
<svg><polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145'/%3E%3C/svg%3E");
<svg><polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180'/%3E%3C/svg%3E");
<svg><polygon points="12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10" fill="gold"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10' fill='gold'/%3E%3C/svg%3E");
<svg><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
<svg><path d="M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z'/%3E%3C/svg%3E");
<svg><path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 10 C 70 20, 110 20, 110 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 10 C 120 20, 180 20, 170 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 60 C 20 80, 40 80, 50 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 60 C 70 80, 110 80, 110 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 60 C 120 80, 180 80, 170 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 110 C 20 140, 40 140, 50 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 110 C 70 140, 110 140, 110 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 110 C 120 140, 180 140, 170 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent'/%3E%3C/svg%3E");