SVG ప్రీవ్యూ / ఎడిటర్

SVG Preview / Editor ఎలా పనిచేస్తుంది

ఈ టూల్ ఏమి చేస్తుంది

SVG Preview / Editor మీరు ఎడిట్ చేస్తున్నప్పుడు SVG మార్కప్‌ను లైవ్‌గా రెండర్ చేస్తుంది మరియు త్వరిత పరిశీలన కోసం మెటాడేటాను (width, height, viewBox, element count) ఎక్స్‌ట్రాక్ట్ చేస్తుంది. ఒక టాగిల్ చెకర్డ్ బ్యాక్‌గ్రౌండ్‌ను జోడిస్తుంది, తద్వారా ట్రాన్స్‌పరెంట్ ప్రాంతాలు స్పష్టంగా కనిపిస్తాయి. ఈ టూల్ CSS background-image లేదా HTML src అట్రిబ్యూట్స్‌లో నేరుగా ఉపయోగించడానికి సరిపోయే URL-encoded data URI ను కూడా ఉత్పత్తి చేస్తుంది.

డెవలపర్ల సాధారణ వినియోగ సందర్భాలు

ఐకాన్ డిజైనర్లు వేర్వేరు సైజుల్లో viewBox గణితం మరియు స్ట్రోక్ వెడల్పులను టెస్ట్ చేస్తారు. ఫ్రంట్‌ఎండ్ డెవలపర్లు ఆప్టిమైజేషన్ (మాన్యువల్‌గా లేదా SVGO ద్వారా) తర్వాత చేతితో ఎడిట్ చేసిన SVG ఐకాన్ ఇంకా సరిగ్గా రెండర్ అవుతుందో లేదో వెరిఫై చేస్తారు. ఇమెయిల్ డెవలపర్లు HTML లో ఇన్‌లైన్ చేయడానికి బ్రాండ్ మార్క్స్ యొక్క కాంపాక్ట్ data URI వెర్షన్లను జనరేట్ చేస్తారు. ఎడ్యుకేటర్లు preserveAspectRatio మరియు overflow వంటి అట్రిబ్యూట్లు రెండరింగ్‌పై ఎలా ప్రభావం చూపుతాయో చూపిస్తారు.

డేటా ఫార్మాట్‌లు, రకాలు, లేదా వేరియంట్లు

ఇన్‌పుట్ రా SVG XML మార్కప్. అవుట్‌పుట్ సాండ్‌బాక్స్‌డ్ iframe లో రెండర్ చేసిన అదే SVG తో పాటు URL-encoded data URI (data:image/svg+xml;charset=utf-8,…) ఉంటుంది. element-count మెట్రిక్ ప్రతి ఓపెనింగ్ ట్యాగ్‌ను (defs, g, gradients, మరియు ఇలాంటి నెస్టెడ్ ఎలిమెంట్లు సహా) లెక్కిస్తుంది, కాంప్లెక్సిటీకి ఒక రఫ్ అంచనాను ఇస్తుంది. ఎక్స్‌ట్రాక్ట్ చేసిన అట్రిబ్యూట్ విలువలు రా ఫార్మ్‌లో చూపబడతాయి.

సాధారణ తప్పిదాలు మరియు ఎడ్జ్ కేసులు

`use` లేదా `image` ఎలిమెంట్లలో href తో రిఫర్ చేసిన బాహ్య రిసోర్సులు సాండ్‌బాక్స్‌డ్ iframe లో లోడ్ కావు. script ఎలిమెంట్లలోని inline JavaScript సాండ్‌బాక్స్ ద్వారా బ్లాక్ అవుతుంది — అనిమేషన్లు SMIL లేదా CSS keyframes పై ఆధారపడాలి. సిస్టమ్‌లో ఇన్‌స్టాల్ కాని నిర్దిష్ట ఫాంట్‌పై ఆధారపడే SVGలు డిఫాల్ట్‌కు ఫాల్బ్యాక్ అవుతాయి; ప్రీవ్యూల కోసం ఫాంట్లను ఎంబెడ్ చేయండి లేదా సిస్టమ్ ఫాంట్లను ఉపయోగించండి.

కోడ్‌తో పోల్చితే ఈ టూల్‌ను ఎప్పుడు ఉపయోగించాలి

ఒక్కసారి చేసే ఐకాన్ డిజైన్, డీబగ్గింగ్, లేదా data URIs జనరేట్ చేయడానికి ఈ బ్రౌజర్ టూల్‌ను ఉపయోగించండి. ప్రొడక్షన్ అసెట్స్ కోసం, మెటాడేటాను తొలగించి మార్కప్‌ను మినిఫై చేయడానికి ట్యూన్ చేసిన కాన్ఫిగ్‌తో SVGలను SVGO ద్వారా రన్ చేయండి, మరియు data URIs ను ప్రతిచోటా ఇన్‌లైన్ చేయడం కంటే మీ యాప్‌లో ఐకాన్లను లోడ్ చేయడానికి స్ప్రైట్ సిస్టమ్ లేదా సరైన బండ్లర్ ఇంటిగ్రేషన్‌ను ఉపయోగించండి.