ನಿಮ್ಮ ವೆಬ್ಪುಟದಲ್ಲಿ ಎಸ್ವಿಜಿ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಹೇಗೆ ಹಾಕಬೇಕು

SVG ಅಥವಾ ಸ್ಕೇಲೆಬಲ್ ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಚಿತ್ರಗಳನ್ನು ಸೆಳೆಯಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಆದರೆ ನೀವು ಕೇವಲ SVG ಟ್ಯಾಗ್ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು ನಿಮ್ಮ HTML ಗೆ ಸ್ಲ್ಯಾಪ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಅವರು ತೋರಿಸುವುದಿಲ್ಲ ಮತ್ತು ನಿಮ್ಮ ಪುಟವು ಅಮಾನ್ಯವಾಗಿದೆ. ಬದಲಾಗಿ, ನೀವು ಮೂರು ವಿಧಾನಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.

ಎಸ್ವಿಜಿ ಎಂಬೆಡ್ ಮಾಡಲು ಆಬ್ಜೆಕ್ಟ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ

HTML ಟ್ಯಾಗ್ ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ಒಂದು SVG ಗ್ರಾಫಿಕ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡುತ್ತದೆ. ನೀವು ತೆರೆಯಲು ಬಯಸುವ SVG ಫೈಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಡೇಟಾ ಟ್ಯಾಗ್ನೊಂದಿಗೆ ನೀವು ಆಬ್ಜೆಕ್ಟ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬರೆಯಿರಿ. ನಿಮ್ಮ SVG ಚಿತ್ರದ (ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ) ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು ಅಗಲ ಮತ್ತು ಎತ್ತರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಬೇಕು.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ, ನೀವು ಟೈಪ್ ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಒಳಗೊಂಡಿರಬೇಕು, ಅದು ಓದಲೇಬೇಕು:

ಮಾದರಿ = "ಚಿತ್ರ / svg + xml"

(ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 8 ಮತ್ತು ಕಡಿಮೆ) ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್ಗಳಿಗೆ ಕೋಡ್ಬೇಸ್. ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ SVG ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್ಗಳಿಗಾಗಿ SVG ಪ್ಲಗ್ಇನ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಪ್ಲಗಿನ್ ಅಡೋಬ್ನಿಂದ http://www.adobe.com/svg/viewer/install/ ನಲ್ಲಿದೆ. ಆದಾಗ್ಯೂ, ಈ ಪ್ಲಗ್ಇನ್ ಅನ್ನು ಇನ್ನು ಮುಂದೆ ಅಡೋಬ್ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಮತ್ತೊಂದು ಆಯ್ಕೆಯನ್ನು ಎಸ್ವೈಆರ್ಸಿ ಎಸ್ವಿಜಿ ಪ್ಲಗಿನ್ ಸ್ಯಾವೇರೆಸ್ ಸಾಫ್ಟ್ವೇರ್ ರಿಸರ್ಚ್ನಿಂದ http://www.savarese.com/software/svgplugin/ ನಲ್ಲಿದೆ.

ನಿಮ್ಮ ವಸ್ತು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

SVG ಗೆ ವಸ್ತುವನ್ನು ಬಳಸುವ ಸಲಹೆಗಳು

  • ಅಗಲ ಮತ್ತು ಎತ್ತರವು ನೀವು ಎಂಬೆಡ್ ಮಾಡುತ್ತಿರುವ ಚಿತ್ರದಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇಲ್ಲವಾದರೆ, ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ಕ್ಲಿಪ್ ಮಾಡಬಹುದು.
  • ನೀವು ಸರಿಯಾದ ವಿಷಯದ ಪ್ರಕಾರವನ್ನು (ಕೌಟುಂಬಿಕತೆ = "ಚಿತ್ರ / svg + xml") ಸೇರಿಸದಿದ್ದಲ್ಲಿ ನಿಮ್ಮ SVG ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸದೆ ಇರಬಹುದು, ಆದ್ದರಿಂದ ನಾನು ಇದನ್ನು ಬಿಟ್ಟುಬಿಡಲು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ.
  • SVG ಫೈಲ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸದ ಬ್ರೌಸರ್ಗಳಿಗೆ ವಸ್ತು ಟ್ಯಾಗ್ನ ಒಳಗೆ ಫಾಲ್ಬ್ಯಾಕ್ ಮಾಹಿತಿಯನ್ನು ನೀವು ಸೇರಿಸಬಹುದು.
  • ನಿಮ್ಮ SVG ಮೂಲವನ್ನು ಮತ್ತು ನಿಯತಾಂಕಗಳಲ್ಲಿನ ವಿಷಯ ಪ್ರಕಾರವನ್ನು ನೀವು ಹೊಂದಿಸಬಹುದು. ಇದು ಐಇ 6 ಮತ್ತು 7 ರಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" ಅಗಲ = "110" ಎತ್ತರ = "60" ಕೋಡ್ಬೇಸ್ = "http://www.savarese.com/software/svgplugin/">

ಇದು ಒಂದು ಕ್ಲಾಸ್ಡ್ ಕೆಲಸ ಮಾಡಲು ಅಗತ್ಯವಿದೆ ಎಂದು ಗಮನಿಸಿ.

ವಸ್ತುವಿನ ಟ್ಯಾಗ್ ಉದಾಹರಣೆಯಲ್ಲಿ ಒಂದು SVG ಅನ್ನು ವೀಕ್ಷಿಸಿ.

ಎಂಬೆಡ್ ಟ್ಯಾಗ್ನೊಂದಿಗೆ SVG ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡಿ

SVG ಯನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿ ನೀವು ಹೊಂದಿರುವ ಇನ್ನೊಂದು ಆಯ್ಕೆ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು. ನೀವು ಅಗಲ <, ಎತ್ತರ, ಕೌಟುಂಬಿಕತೆ ಮತ್ತು ಕೋಡ್ಬೇಸ್> ಸೇರಿದಂತೆ ಆಬ್ಜೆಕ್ಟ್ ಟ್ಯಾಗ್ನಂತೆಯೇ ಸುಮಾರು ಅದೇ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಿ. ಒಂದೇ ವ್ಯತ್ಯಾಸವೆಂದರೆ ಡೇಟಾದ ಬದಲಿಗೆ, ನಿಮ್ಮ SVG ಡಾಕ್ಯುಮೆಂಟ್ URL ಅನ್ನು src ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಇರಿಸಿ.

ನಿಮ್ಮ ಎಂಬೆಡ್ ಹೀಗಿರುತ್ತದೆ:

src = "http://your-domain.here/z-circle.svg" ಅಗಲ = "210" ಎತ್ತರ = "210" ಮಾದರಿ = "ಚಿತ್ರ / svg + xml" ಕೋಡ್ಬೇಸ್ = "http://www.adobe.com / svg / ವೀಕ್ಷಕ / ಅನುಸ್ಥಾಪನೆ "/>

SVG ಗಾಗಿ ಎಂಬೆಡ್ ಮಾಡುವ ಸಲಹೆಗಳು

  • ಎಂಬೆಡ್ ಟ್ಯಾಗ್ ಮಾನ್ಯ HTML4 ಅಲ್ಲ, ಆದರೆ ಇದು ಮಾನ್ಯ HTML5 ಆಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಇದನ್ನು HTML4 ಪುಟದಲ್ಲಿ ಬಳಸಿದರೆ, ನಿಮ್ಮ ಪುಟ ಮೌಲ್ಯೀಕರಿಸುವುದಿಲ್ಲ ಎಂದು ನೀವು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.
  • ಉತ್ತಮ ಹೊಂದಾಣಿಕೆಗಾಗಿ src ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಸಂಪೂರ್ಣ ಕೋಲ್ಫೈಡ್ ಡೊಮೈನ್ ಹೆಸರನ್ನು ಬಳಸಿ.
  • ಅಡೋಬ್ ಪ್ಲಗ್ಇನ್ನೊಂದಿಗೆ ಎಂಬೆಡ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಮೊಜಿಲ್ಲಾ ಆವೃತ್ತಿಗಳು 1.0 ರಿಂದ 1.4 ಕ್ರ್ಯಾಶ್ ಆಗುತ್ತವೆ ಎಂದು ಕೆಲವು ವರದಿಗಳಿವೆ.

ಒಂದು ಎಂಬೆಡ್ ಟ್ಯಾಗ್ ಉದಾಹರಣೆಯಲ್ಲಿ ಒಂದು SVG ಅನ್ನು ವೀಕ್ಷಿಸಿ.

SVG ಅನ್ನು ಸೇರಿಸಲು ಒಂದು iframe ಅನ್ನು ಬಳಸಿ

ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಎಸ್ವಿಜಿ ಇಮೇಜ್ ಅನ್ನು ಸೇರಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಐಫ್ರೇಮ್ಗಳು . ಇದಕ್ಕೆ ಕೇವಲ ಮೂರು ಗುಣಲಕ್ಷಣಗಳು ಬೇಕಾಗುತ್ತವೆ: ಎಂದಿನಂತೆ ಅಗಲ ಮತ್ತು ಎತ್ತರ, ಮತ್ತು ನಿಮ್ಮ SVG ಕಡತದ ಸ್ಥಳವನ್ನು ಸೂಚಿಸುವ src.

ನಿಮ್ಮ iframe ಹೀಗೆ ಕಾಣುತ್ತದೆ: