LogoSVG URL என்கோடர்

SVG URL என்கோடர்

SVG-ஐ திரும்ப மறைகுறியாக்க விரும்பினால், குறியாக்கப்பட்ட SVG-ஐ இங்கே வையுங்கள்
முன்னோட்டம்

SVG ஐ CSS-இல் URL ஆகப் பயன்படுத்தலாம், ஆனால் என்கோடிங் இல்லாமல் அது அனைத்து உலாவிகளிலும் வேலை செய்யாது.
SVG-இல் encodeURIComponent() என்கோடிங் பயன்படுத்தினால் அது எங்கும் வேலை செய்யும்.

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-இல் SVG கோடை நேரடியாகப் பயன்படுத்த, SVG கோடை முதலில் என்கோட் செய்ய வேண்டும். இதற்கு இந்த SVG URL Encoder கருவியையோ அல்லது JavaScript சார்பு encodeURIComponent() ஐயோ பயன்படுத்தலாம். என்கோட் செய்யப்பட்ட SVG தரவு URI ஐ url() சார்பு மூலம் background-image, border-image மற்றும் mask CSS பண்புகளுடன் பயன்படுத்தலாம். எடுத்துக்காட்டு: 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");

CSS-இல் SVG நிறத்தை எவ்வாறு மாற்றுவது?

எந்த 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 (Uniform Resource Locator) என்பது இணையத்தில் உள்ள தனித்துவமான வளத்தின் முகவரியாகும். HTML பக்கங்கள், CSS ஆவணங்கள், படங்கள் போன்ற வளங்களை மீட்டெடுக்க உலாவிகள் பயன்படுத்தும் முக்கிய வழிமுறைகளில் இதுவும் ஒன்றாகும்.

URL ஐ எவ்வாறு என்கோட் செய்வது?

URL-ஐ என்கோட் செய்ய encodeURIComponent() சார்பை பயன்படுத்தலாம். இது URI-இல் உள்ள குறிப்பிட்ட எழுத்துகளை அவற்றின் UTF-8 என்கோடிங்கை குறிக்கும் ஒன்று, இரண்டு, மூன்று அல்லது நான்கு escape சீக்வென்ஸ்களால் மாற்றி என்கோட் செய்கிறது. encodeURI() உடன் ஒப்பிடும்போது, இந்த சார்பு URI தொடரியல் பகுதியான எழுத்துகள் உட்பட அதிக எழுத்துகளை என்கோட் செய்கிறது.

URL ஐ எவ்வாறு டீகோட் செய்வது?

URL-ஐ டீகோட் செய்ய decodeURIComponent() சார்பை பயன்படுத்தலாம், இது %XX வடிவிலான ஒவ்வொரு escape சீக்வென்ஸையும் ஒரு UTF-8 கோட் யூனிட் (ஒரு பைட்) ஆக கருதி URI-ஐ டீகோட் செய்கிறது. UTF-8-ல், முதல் பைட்டில் முன்னணி 1 பிட்களின் எண்ணிக்கை (1-பைட் ASCII எழுத்துகளுக்கு 0, அல்லது 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");