SVG ಪೂರ್ವವೀಕ್ಷಣೆ / ಎಡಿಟರ್

SVG Preview / Editor ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ

SVG Preview / Editor ನೀವು ಎಡಿಟ್ ಮಾಡುವಂತೆ SVG ಮಾರ್ಕಪ್ ಅನ್ನು ಲೈವ್ ಆಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ತ್ವರಿತ ಪರಿಶೀಲನೆಗಾಗಿ ಮೆಟಾಡೇಟಾ (width, height, viewBox, element count) ಅನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ. ಒಂದು ಟಾಗಲ್ ಚೆಕ್ಕರ್ಡ್ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನೋಡಬಹುದು. ಈ ಸಾಧನವು CSS background-image ಅಥವಾ HTML src ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಬಳಸಲು ಸೂಕ್ತವಾದ URL-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ data URI ಅನ್ನು ಕೂಡ ಉತ್ಪಾದಿಸುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

ಐಕಾನ್ ಡಿಸೈನರ್‌ಗಳು ವಿಭಿನ್ನ ಗಾತ್ರಗಳಲ್ಲಿ viewBox ಗಣಿತ ಮತ್ತು stroke ಅಗಲಗಳನ್ನು ಪರೀಕ್ಷಿಸುತ್ತಾರೆ. ಫ್ರಂಟ್‌ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು ಆಪ್ಟಿಮೈಸೇಶನ್ (ಕೈಯಾರೆ ಅಥವಾ SVGO ಮೂಲಕ) ನಂತರ ಕೈಯಾರೆ ಎಡಿಟ್ ಮಾಡಿದ SVG ಐಕಾನ್ ಇನ್ನೂ ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತಾರೆ. ಇಮೇಲ್ ಡೆವಲಪರ್‌ಗಳು HTML ನಲ್ಲಿ inline ಮಾಡಲು ಬ್ರ್ಯಾಂಡ್ ಮಾರ್ಕ್‌ಗಳ ಕಾಂಪ್ಯಾಕ್ಟ್ data URI ಆವೃತ್ತಿಗಳನ್ನು ರಚಿಸುತ್ತಾರೆ. ಶಿಕ್ಷಕರು preserveAspectRatio ಮತ್ತು overflow ಮುಂತಾದ ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ರೆಂಡರಿಂಗ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತಾರೆ.

ಡೇಟಾ ಸ್ವರೂಪಗಳು, ಪ್ರಕಾರಗಳು, ಅಥವಾ ರೂಪಾಂತರಗಳು

ಇನ್‌ಪುಟ್ ಕಚ್ಚಾ SVG XML ಮಾರ್ಕಪ್. ಔಟ್‌ಪುಟ್ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್ ಮಾಡಿದ iframe ನಲ್ಲಿ ರೆಂಡರ್ ಆಗಿರುವ ಅದೇ SVG ಜೊತೆಗೆ URL-ಎನ್‌ಕೋಡ್ ಮಾಡಿದ 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 URIಗಳನ್ನು ರಚಿಸಲು ಬ್ರೌಸರ್ ಸಾಧನವನ್ನು ಬಳಸಿ. ಪ್ರೊಡಕ್ಷನ್ ಆಸ್ತಿಗಳಿಗಾಗಿ, ಮೆಟಾಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕಿ ಮಾರ್ಕಪ್ ಅನ್ನು ಮಿನಿಫೈ ಮಾಡಲು ಟ್ಯೂನ್ ಮಾಡಿದ ಕಾನ್ಫಿಗ್‌ನೊಂದಿಗೆ SVGಗಳನ್ನು SVGO ಮೂಲಕ ಓಡಿಸಿ, ಮತ್ತು ಎಲ್ಲೆಡೆ data URIಗಳನ್ನು inline ಮಾಡುವ ಬದಲು ನಿಮ್ಮ ಅಪ್‌ನಲ್ಲಿ ಐಕಾನ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು sprite ಸಿಸ್ಟಮ್ ಅಥವಾ ಸರಿಯಾದ bundler ಇಂಟಿಗ್ರೇಶನ್ ಅನ್ನು ಬಳಸಿ.