SVG പ്രിവ്യൂ / എഡിറ്റർ

SVG Preview / Editor എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഉപകരണം ചെയ്യുന്നത് എന്താണ്

SVG Preview / Editor നിങ്ങൾ എഡിറ്റ് ചെയ്യുന്നതിനനുസരിച്ച് SVG മാർക്കപ്പ് ലൈവായി റെൻഡർ ചെയ്യുകയും വേഗത്തിലുള്ള ഇൻസ്പെക്ഷനായി മെറ്റാഡാറ്റ (width, height, viewBox, element count) എടുക്കുകയും ചെയ്യുന്നു. ഒരു ടോഗിൾ ചെക്കേഡ് ബാക്ക്ഗ്രൗണ്ട് ചേർക്കുന്നു, അതിനാൽ ട്രാൻസ്‌പാരന്റ് പ്രദേശങ്ങൾ വ്യക്തമായി കാണാം. CSS background-image അല്ലെങ്കിൽ HTML src ആട്രിബ്യൂട്ടുകളിൽ നേരിട്ട് ഉപയോഗിക്കാൻ അനുയോജ്യമായ URL-encoded data URIയും ഈ ടൂൾ സൃഷ്ടിക്കുന്നു.

ഡെവലപ്പർമാർക്കുള്ള സാധാരണ ഉപയോഗ സാഹചര്യങ്ങൾ

ഐക്കൺ ഡിസൈനർമാർ വ്യത്യസ്ത വലുപ്പങ്ങളിൽ viewBox കണക്കുകളും stroke വീതികളും ടെസ്റ്റ് ചെയ്യുന്നു. ഫ്രണ്ട്‌എൻഡ് ഡെവലപ്പർമാർ ഓപ്റ്റിമൈസേഷനുശേഷം (മാനുവൽ അല്ലെങ്കിൽ SVGO വഴി) കൈകൊണ്ട് എഡിറ്റ് ചെയ്ത SVG ഐക്കൺ ഇപ്പോഴും ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടോ എന്ന് പരിശോധിക്കുന്നു. ഇമെയിൽ ഡെവലപ്പർമാർ HTML-ൽ inline ചെയ്യാൻ ബ്രാൻഡ് മാർക്കുകളുടെ കംപാക്റ്റ് data URI പതിപ്പുകൾ സൃഷ്ടിക്കുന്നു. preserveAspectRatio, overflow പോലുള്ള ആട്രിബ്യൂട്ടുകൾ റെൻഡറിംഗിനെ എങ്ങനെ ബാധിക്കുന്നു എന്ന് അധ്യാപകർ കാണിക്കുന്നു.

ഡാറ്റ ഫോർമാറ്റുകൾ, തരങ്ങൾ, അല്ലെങ്കിൽ വകഭേദങ്ങൾ

ഇൻപുട്ട് raw SVG XML മാർക്കപ്പാണ്. ഔട്ട്പുട്ട് സാൻഡ്‌ബോക്സ്ഡ് iframe-ൽ റെൻഡർ ചെയ്ത അതേ SVG കൂടാതെ URL-encoded data URI (data:image/svg+xml;charset=utf-8,…) ആണ്. element-count മെട്രിക് ഓരോ ഓപ്പണിംഗ് ടാഗും (defs, g, gradients, സമാനമായ നെസ്റ്റഡ് എലമെന്റുകൾ ഉൾപ്പെടെ) എണ്ണുന്നു, സങ്കീർണ്ണതയെക്കുറിച്ച് ഒരു ഏകദേശ ധാരണ നൽകുന്നു. എടുക്കപ്പെട്ട ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ raw രൂപത്തിൽ കാണിക്കുന്നു.

സാധാരണ പിഴവുകളും എഡ്ജ് കേസുകളും

href ഉള്ള `use` അല്ലെങ്കിൽ `image` എലമെന്റുകൾ റഫർ ചെയ്യുന്ന external resources സാൻഡ്‌ബോക്സ്ഡ് iframe-ിനുള്ളിൽ ലോഡ് ചെയ്യില്ല. script എലമെന്റുകളിലെ inline JavaScript സാൻഡ്‌ബോക്സ് ബ്ലോക്ക് ചെയ്യും — ആനിമേഷനുകൾ SMIL അല്ലെങ്കിൽ CSS keyframes ആശ്രയിക്കണം. സിസ്റ്റത്തിൽ ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലാത്ത ഒരു പ്രത്യേക ഫോണ്ട് ആശ്രയിക്കുന്ന SVGകൾ ഡീഫോൾട്ടിലേക്ക് ഫാൾബാക്ക് ചെയ്യും; പ്രിവ്യൂക്കായി ഫോണ്ടുകൾ embed ചെയ്യുക അല്ലെങ്കിൽ സിസ്റ്റം ഫോണ്ടുകൾ ഉപയോഗിക്കുക.

കോഡിനേക്കാൾ ഈ ഉപകരണം എപ്പോൾ ഉപയോഗിക്കണം

ഒറ്റത്തവണ ഐക്കൺ ഡിസൈൻ, ഡീബഗ്ഗിംഗ്, അല്ലെങ്കിൽ data URIകൾ സൃഷ്ടിക്കൽ എന്നിവയ്ക്ക് ഈ ബ്രൗസർ ടൂൾ ഉപയോഗിക്കുക. പ്രൊഡക്ഷൻ ആസറ്റുകൾക്കായി, മെറ്റാഡാറ്റ നീക്കാനും മാർക്കപ്പ് മിനിഫൈ ചെയ്യാനും ട്യൂൺ ചെയ്ത കോൺഫിഗോടെ SVGകൾ SVGO വഴി ഓടിക്കുക, കൂടാതെ എല്ലായിടത്തും data URIകൾ inline ചെയ്യുന്നതിനുപകരം നിങ്ങളുടെ ആപ്പിൽ ഐക്കണുകൾ ലോഡ് ചെയ്യാൻ ഒരു സ്പ്രൈറ്റ് സിസ്റ്റമോ ശരിയായ ബണ്ട്ലർ ഇന്റഗ്രേഷനോ ഉപയോഗിക്കുക.