SVG വ്യൂവർ

Q: "എന്റെ SVG എവിടെയെങ്കിലും upload ചെയ്യുന്നുണ്ടോ?"

"ഇല്ല. പേസ്റ്റ് ചെയ്ത SVGയും ലോഡ് ചെയ്ത files ഉം നിങ്ങളുടെ browser-ിൽ തന്നെ തുടരുന്നു, server-ിലേക്ക് അയയ്ക്കുന്നില്ല."

Q: "script അല്ലെങ്കിൽ foreignObject ഉള്ള SVG-കൾക്ക് എന്താകും?"

"സുരക്ഷിത മുൻകാഴ്ച render ചെയ്യുന്നതിന് മുമ്പ് അവ elements നീക്കം ചെയ്യുകയും info panel-ൽ warning കാണിക്കുകയും ചെയ്യും."

Q: "External images അല്ലെങ്കിൽ fonts ഉള്ള SVG-കൾ അതേപടി render ആകുമോ?"

"എല്ലായ്പ്പോഴും അല്ല. External references disable ചെയ്തതിനാൽ യഥാർത്ഥ environment-നോട് രൂപം വ്യത്യസ്തമായേക്കാം. ഈ ടൂൾ സുരക്ഷിതമായ local inspection-നാണ് മുൻഗണന നൽകുന്നത്."

Q: "എന്റെ SVG render ആകാത്തത് എന്തുകൊണ്ട്?"

"സാധാരണ കാരണങ്ങൾ invalid XML, തെറ്റായ attribute values, അല്ലെങ്കിൽ root element `svg` അല്ലാത്തതായിരിക്കും. ടൂൾ കാണിക്കുന്ന error message പരിശോധിക്കുക."

Q: "Background മാറ്റേണ്ടത് എന്തിനാണ്?"

"Transparent പ്രദേശങ്ങളും light-colored icons ഉം background അനുസരിച്ച് വളരെ വ്യത്യസ്തമായി കാണാം, അതിനാൽ checker, white, dark backgrounds എന്നിവ വേഗത്തിൽ പരീക്ഷിക്കാൻ ടൂൾ അനുവദിക്കുന്നു."

Raw SVG markup പേസ്റ്റ് ചെയ്ത് rendered result ഉടൻ മുൻകാഴ്ചയായി കാണുക.

ഈ മുൻകാഴ്ച scripts, external references എന്നിവ disable ചെയ്യുന്നു; അതോടൊപ്പം viewBox, size details എന്നിവ പരിശോധിക്കാനും അനുവദിക്കുന്നു.

SVG മുൻകാഴ്ച: raw code പേസ്റ്റ് ചെയ്ത് ഫലം ഉടൻ പരിശോധിക്കുക

viewBox, size checks: transparency, സുരക്ഷാ അപകട സാധ്യതയുള്ള ഉള്ളടക്കം എന്നിവ പരിശോധിക്കുക

നിങ്ങളുടെ SVG ഒരിക്കലും server-ിലേക്ക് അയയ്ക്കുന്നില്ല. Processing മുഴുവനായി browser-ിൽ തന്നെയാണ്.

Dangerous elements, external URL references എന്നിവ മുൻകാഴ്ചയിൽ disable ചെയ്തിരിക്കുന്നു.

എങ്ങനെ ഉപയോഗിക്കാം

SVG code പേസ്റ്റ് ചെയ്യുക അല്ലെങ്കിൽ `.svg` file ലോഡ് ചെയ്യുക.
Rendering പരിശോധിക്കാൻ background, zoom level എന്നിവ മാറുക.
viewBox, size details, warnings എന്നിവ പരിശോധിച്ച്, ആവശ്യമെങ്കിൽ SVG save ചെയ്യുക.

Sample

ലളിതമായ icon SVG

Input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

Output

നീല നിറത്തിലുള്ള ഒരു വൃത്താകൃതിയിലുള്ള icon rendered ആകുന്നു, info panel-ൽ viewBox `0 0 120 120` ആയി കാണിക്കുന്നു.

പതിവുചോദ്യങ്ങൾ

എന്റെ SVG എവിടെയെങ്കിലും upload ചെയ്യുന്നുണ്ടോ?

ഇല്ല. പേസ്റ്റ് ചെയ്ത SVGയും ലോഡ് ചെയ്ത files ഉം നിങ്ങളുടെ browser-ിൽ തന്നെ തുടരുന്നു, server-ിലേക്ക് അയയ്ക്കുന്നില്ല.

script അല്ലെങ്കിൽ foreignObject ഉള്ള SVG-കൾക്ക് എന്താകും?

സുരക്ഷിത മുൻകാഴ്ച render ചെയ്യുന്നതിന് മുമ്പ് അവ elements നീക്കം ചെയ്യുകയും info panel-ൽ warning കാണിക്കുകയും ചെയ്യും.

External images അല്ലെങ്കിൽ fonts ഉള്ള SVG-കൾ അതേപടി render ആകുമോ?

എല്ലായ്പ്പോഴും അല്ല. External references disable ചെയ്തതിനാൽ യഥാർത്ഥ environment-നോട് രൂപം വ്യത്യസ്തമായേക്കാം. ഈ ടൂൾ സുരക്ഷിതമായ local inspection-നാണ് മുൻഗണന നൽകുന്നത്.

എന്റെ SVG render ആകാത്തത് എന്തുകൊണ്ട്?

സാധാരണ കാരണങ്ങൾ invalid XML, തെറ്റായ attribute values, അല്ലെങ്കിൽ root element `svg` അല്ലാത്തതായിരിക്കും. ടൂൾ കാണിക്കുന്ന error message പരിശോധിക്കുക.

Background മാറ്റേണ്ടത് എന്തിനാണ്?

Transparent പ്രദേശങ്ങളും light-colored icons ഉം background അനുസരിച്ച് വളരെ വ്യത്യസ്തമായി കാണാം, അതിനാൽ checker, white, dark backgrounds എന്നിവ വേഗത്തിൽ പരീക്ഷിക്കാൻ ടൂൾ അനുവദിക്കുന്നു.

കുറിപ്പുകൾ

സുരക്ഷയ്ക്കായി external URL references, dangerous elements എന്നിവ render ചെയ്യുന്നതിന് മുമ്പ് disable ചെയ്യുന്നു.
External fonts അല്ലെങ്കിൽ images ആശ്രയിക്കുന്ന SVG-കൾ യഥാർത്ഥ environment-ിൽ കാണുന്നതുപോലെ കാണണമെന്നില്ല.
വളരെ വലിയ SVG files live preview mode-ിൽ നിന്ന് സ്വയം പുറത്താക്കി manual render ആവശ്യപ്പെടും.

SVG വ്യൂവർ

എങ്ങനെ ഉപയോഗിക്കാം

Sample

പതിവുചോദ്യങ്ങൾ

കുറിപ്പുകൾ