SVG ವೀಕ್ಷಕ
raw SVG markup ಅನ್ನು ಅಂಟಿಸಿ ಮತ್ತು ರೆಂಡರ್ ಮಾಡಿದ ಫಲಿತಾಂಶವನ್ನು ತಕ್ಷಣ ಪೂರ್ವದೃಶ್ಯದಲ್ಲಿ ನೋಡಿ.
ಪೂರ್ವದೃಶ್ಯವು ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಮತ್ತು ಬಾಹ್ಯ ಉಲ್ಲೇಖಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಆದರೆ viewBox ಮತ್ತು ಗಾತ್ರದ ವಿವರಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
SVG ಪೂರ್ವದೃಶ್ಯ: ಕಚ್ಚಾ ಕೋಡ್ ಅಂಟಿಸಿ ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ತಕ್ಷಣ ಪರಿಶೀಲಿಸಿ
viewBox ಮತ್ತು ಗಾತ್ರದ ಪರಿಶೀಲನೆಗಳು: ಪಾರದರ್ಶಕತೆ ಮತ್ತು ಸಾಧ್ಯವಾದಷ್ಟು ಅಸುರಕ್ಷಿತ ವಿಷಯವನ್ನು ಪರಿಶೀಲಿಸಿ
ಬಳಕೆ ವಿಧಾನ
- SVG ಕೋಡ್ ಅನ್ನು ಅಂಟಿಸಿ ಅಥವಾ `.svg` ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಿ.
- ರೆಂಡರಿಂಗ್ ಪರಿಶೀಲಿಸಲು background ಮತ್ತು zoom ಮಟ್ಟವನ್ನು ಬದಲಾಯಿಸಿ.
- viewBox, ಗಾತ್ರದ ವಿವರಗಳು, ಮತ್ತು ಎಚ್ಚರಿಕೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ, ನಂತರ ಅಗತ್ಯವಿದ್ದರೆ SVG ಅನ್ನು ಉಳಿಸಿ.
Sample
ಸರಳ ಐಕಾನ್ 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
ನೀಲಿ ವೃತ್ತಾಕಾರದ ಐಕಾನ್ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಮತ್ತು ಮಾಹಿತಿ ಫಲಕದಲ್ಲಿ viewBox ಅನ್ನು `0 0 120 120` ಎಂದು ತೋರಿಸಲಾಗುತ್ತದೆ.
FAQ
ನನ್ನ SVG ಎಲ್ಲಾದರೂ ಅಪ್ಲೋಡ್ ಆಗುತ್ತದೆಯೇ?
ಇಲ್ಲ. ಅಂಟಿಸಿದ SVG ಮತ್ತು ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್ಗಳು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ಉಳಿಯುತ್ತವೆ ಮತ್ತು ಸರ್ವರ್ಗೆ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ.
script ಅಥವಾ foreignObject ಇರುವ SVGsಗೆ ಏನಾಗುತ್ತದೆ?
ಸುರಕ್ಷಿತ ಪೂರ್ವದೃಶ್ಯವು ರೆಂಡರ್ ಮಾಡುವ ಮೊದಲು ಆ ಅಂಶಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ಮಾಹಿತಿ ಫಲಕದಲ್ಲಿ ಎಚ್ಚರಿಕೆಯನ್ನು ತೋರಿಸುತ್ತದೆ.
ಬಾಹ್ಯ ಚಿತ್ರಗಳು ಅಥವಾ ಫಾಂಟ್ಗಳಿರುವ SVGs ನಿಖರವಾಗಿ ಅದೇ ರೀತಿಯಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತವೆಯೇ?
ಎಲ್ಲಾಗಲೂ ಅಲ್ಲ. ಬಾಹ್ಯ ಉಲ್ಲೇಖಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ರೂಪವು ಮೂಲ ಪರಿಸರದಿಂದ ಭಿನ್ನವಾಗಿರಬಹುದು. ಈ ಉಪಕರಣವು ಸುರಕ್ಷಿತ ಸ್ಥಳೀಯ ಪರಿಶೀಲನೆಗೆ ಆದ್ಯತೆ ನೀಡುತ್ತದೆ.
ನನ್ನ SVG ಏಕೆ ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ?
ಸಾಮಾನ್ಯ ಕಾರಣಗಳು ಅಮಾನ್ಯ XML, ತಪ್ಪಾದ attribute ಮೌಲ್ಯಗಳು ಅಥವಾ `svg` ಅಲ್ಲದ root ಅಂಶ. ಉಪಕರಣ ತೋರಿಸುವ ದೋಷ ಸಂದೇಶವನ್ನು ಪರಿಶೀಲಿಸಿ.
ನಾನು ಹಿನ್ನೆಲೆಯನ್ನು ಏಕೆ ಬದಲಾಯಿಸಬೇಕು?
ಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳು ಮತ್ತು ಹಗುರ ಬಣ್ಣದ ಐಕಾನ್ಗಳು ಹಿನ್ನೆಲೆಯ ಮೇಲೆ ಅವಲಂಬಿಸಿ ಬಹಳ ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಕಾಣಬಹುದು, ಆದ್ದರಿಂದ ಉಪಕರಣವು checker, ಬಿಳಿ ಮತ್ತು ಗಾಢ ಹಿನ್ನೆಲೆಗಳನ್ನು ಬೇಗ ಪರೀಕ್ಷಿಸಲು ಬಿಡುತ್ತದೆ.
Notes
- ಸುರಕ್ಷತೆಗಾಗಿ, ಬಾಹ್ಯ URL ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಅಪಾಯಕಾರಿ ಅಂಶಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಮೊದಲು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ.
- ಬಾಹ್ಯ ಫಾಂಟ್ಗಳು ಅಥವಾ ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ SVGs ಮೂಲ ಪರಿಸರದಲ್ಲಿರುವಂತೆ ಕಾಣದೇ ಇರಬಹುದು.
- ಬಹಳ ದೊಡ್ಡ SVG ಫೈಲ್ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ live preview ಮೋಡ್ನಿಂದ ಹೊರಬಂದು ಕೈಯಾರೆ ರೆಂಡರ್ ಮಾಡಲು ಕೇಳುತ್ತವೆ.