�m���ē�����AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�֘A�Z�p�BHTML�̂悤�Ȋ��o�Ő}�`���`��ł���uSVG�v���n�b�N���悤
�@�{�A���ł́AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�Z�p����₷���Љ�Ă��܂��B��2��ƂȂ鍡��̃e�[�}��SVG�ł��B
�@�������̕��������Ǝv���܂����ASVG��XML���x�[�X�ɂ����x�N�g���O���t�B�b�N�X�̋L�q����ł��BPNG�̂悤�ȉ摜�t�H�[�}�b�g��1�ł�����܂����A���ۂɂ�XML���L�q�����e�L�X�g�t�@�C���ł���AHTML�Ɠ��l��JavaScript�iDOM API�j�ɂ�鐧����s���܂��BHTML���^�O�ɂ���ĕ����̍\�����L�q����̂Ɠ��l�ɁASVG�̓^�O�Ő}�`���L�q���܂��B
�@����SVG�̋K�i���̂͂��Ȃ�ȑO���瑶�݂����̂ł����A���炭Internet Explorer�i�ȍ~IE�j����̃T�|�[�g������ꂸ�A���p���L����܂���ł����B�������A����IE���ŐV��IE9��SVG�ɐ����Ή����A���p������������܂��B�g�債�Ă��W���M�[���o�Ȃ�SVG�̃x�N�g���O���t�B�b�N�X�́A���܂��܂ȉ𑜓x�ւ̑Ή����]�܂�郂�o�C���@������̃T�C�g��A�ŋ߂͂��̃��X�|���V�u�f�U�C���ɂ����Ă��ł��B�����HTML�ACSS�ɕ��ԏd�v��Web�Z�p�Ƃ��ĕ��y���Ă������Ƃł��傤�B
�@����͊�b�҂Ƃ������ƂŁASVG�̊�{�I�ȕ`��@�\�𒆐S�ɉ�����܂��B�����āA��荂�x�ȍ��W�ϊ���t�B���^�[�@�\�ACSS/JavaScript����̋@�\�Ȃǂ́A����ɉ������\��ł��B
�@�܂��ŏ��ɁASVG�̊�{�I�ȍ\���𗝉����Ă����܂��傤�B�ȉ��ɔ��ɃV���v����SVG�̗�������܂��B���Ă̒ʂ�XML�ł���A�e�L�X�g�G�f�B�^�œ��͂ł��܂��B.svg�̊g���q�ŕۑ����i�����R�[�h��UTF-8�ɂ��Ă��������j�AWeb�u���E�U�Ƀh���b�O���h���b�v����A�摜���\������܂��B
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="100" cy="100" r="100" fill="red" /> <rect x="130" y="130" width="300" height="200" fill="blue" /> </svg>
�@���̂悤�ɁAsvg�^�O�����[�g�v�f�Ƃ��āA�K�Ȗ��O��Ԃ��w�肷��ASVG�摜�Ƃ��Ĉ����܂��BXML�Ɋ���Ă��Ȃ��Ɠ�̋L�q�Ɏv���邩������܂��Asvg�^�O�Ƃ��̖��O��Ԃ͂قڒ�^��Ȃ̂ŁA���̂܂܊o���Ă��܂��悢�ł��傤�B
�@�\�������}�`�́Asvg�^�O�̎q�i���j�v�f�Ƃ��ċL�q���܂��B��̗�ł�circle�^�O��rect�^�O���g���ĉ~�Ǝl�p�`��`�悵�Ă��܂��B
�@�������}�`��`�悷��^�O��circle�Arect�ȊO�ɂ������p�ӂ���Ă���A�����ɂ��Ă͎��y�[�W�ȍ~�ŏڂ������グ�Ă����܂��B�����ł͂����������ӂ̘b�𑱂��܂��B
�@�쐬����SVG�摜�͒P�Ƃŕ\�����邱�Ƃ��ł��܂����A�����̏ꍇ��HTML�y�[�W�̈ꕔ�Ƃ��ĕ\���������Ƃ���ł��傤�BSVG��HTML���ŕ\������ɂ́A3�̕��@������܂��B
�@���ꂼ��ɕʂ̗��_�Ɛ�����̂ŁA�ʂɌ��Ă����܂��B�܂��͊�{�ƂȂ�Aobject�^�O��p������@�ł��BHTML����SVG�摜��\���������ӏ���object�^�O��}�����Atype�����Ɂuimage/svg+xml�v���Adata�����ɕ\������SVG�t�@�C����URL���w�肵�܂��B���̕��@�͍ł��݊����������ASVG���T�|�[�g�����قڂ��ׂĂ�Web�u���E�U�œ��삵�܂��BJavaScript�ɂ��SVG�h�L�������g�ւ̃A�N�Z�X���\�ł��B���ɗ��R���Ȃ���A�O��SVG�t�@�C���̕\���ɂ͂��̕��@���g�p����̂�����ł��B
�@�Ȃ��A�L�����ł͊e�@�\�̃T�|�[�g�u���E�U�ɂ��Č��y���Ă��܂��A������Web�u���E�U�ł͏Љ�Ă���@�\�̈ꕔ�����p�ł��܂���B�ǂ̃u���E�U�łǂ̋@�\�����p�ł��邩�́A�e���ŃT���v�������s���Ē��ׂĂ݂Ă��������B�����Ƃ��AWeb�u���E�U�͓��i�����Ői�����Ă���̂ŁA�قƂ�ǂ̋@�\���߂������ɃT�|�[�g����邱�Ƃł��傤�B
<object type="image/svg+xml" data="sample/sample01.svg">
�@�ŋ߂̃u���E�U�Ȃ�A���̉摜�`���Ɠ��l��img�^�O��CSS�ŕ\�����邱�Ƃ��\�ł��B�������A�o�[�W�����̌Â��u���E�U�iFirefox�̃o�[�W����4.0���O�Ȃǁj�ł͓��삹���AJavaScript�ɂ�鐧����s���Ȃ��Ƃ�������������܂��B�Â��u���E�U�Ƃ̌݊������s�v�ŁA�Ȃ�����SVG�𑼂̉摜�`���Ɠ��l�Ɉ��������ꍇ�ɗ��p����Ƃ悢�ł��傤�B
<style> .svgbg { background: url(sample/sample01.svg); width:430px; height:330px; } </style> <img src="sample/image01.svg"> <div class="svgbg"></div>
�@SVG�Ɠ�����XML�x�[�X�ł���XHTML�ɂ́ASVG�ږ��ߍ��߂܂��B�܂��AHTML5�����̍\����͂��T�|�[�g�����ŐV�̃u���E�U�ł���AHTML�ł����l�̖��ߍ��݂��\�ł��B�ȉ���HTML�ɖ��ߍ���ł��B
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="100" cy="100" r="100" fill="red" /> <rect x="130" y="130" width="300" height="200" fill="blue" /> </svg> </body> </html>
�@�������AHTML�ɖ��ߍ��ޏꍇ�͖��O��ԂɊւ��Ď�̒��ӂ��K�v�ł��BHTML����svg�^�O�ł͖��O��Ԃ̎w��ixmlns�����j���F�����ꂸ�A��ɏ�L�̃R�[�h��Ɠ����w�肪�s��ꂽ���̂Ƃ��Ĉ����܂��i���ʓI��HTML�ɖ��ߍ���SVG�ł�xmlns�������ȗ��ł��܂��j�B�]���āA�ȉ���HTML�ł�SVG�摜�͕\������܂���B
<!DOCTYPE html> <html> <body> <svg:svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg:circle cx="100" cy="100" r="100" fill="red" /> <svg:rect x="130" y="130" width="300" height="200" fill="blue" /> </svg:svg> </body> </html>
�@���݂ł�IE9���܂ނ��ׂẴ��W���[�u���E�U��HTML�ւ�SVG�̖��ߍ��݂��T�|�[�g���Ă��܂��B����܂�HTML�����Ő}��\������͖̂ʓ|�ȍ�Ƃł������ASVG�𗘗p����ΊȒP�ȃ^�O�̋L�q�����Ŏ����ł��܂��B�}�`�`����s�����߂֗̕��ȃc�[���Ƃ��āA�܂��HTML�̈ꕔ�̂悤��SVG�����p�ł��܂��B
�@SVG��PNG�Ȃǂ̈�ʓI�ȉ摜�`���ƈقȂ�A�x�N�g���f�[�^�Ƃ��ĉ摜��\�����܂��B���̂��߁A�T�O��́u�摜�T�C�Y�v�Ƃ������̂����݂��܂���BSVG�ł͉摜�͕��ʏ�ɖ����ɍL�����Ă���A���̓���̏ꏊ�ɐ}�`��z�u���Ă��邾���Ȃ̂ł��B
�@�������A����HTML�����Ȃǂɉ摜��\������ꍇ�A����ł͓s�����悭����܂���B���̂���svg�^�O��width�Aheight�A�����viewBox�Ƃ����������p�ӂ���Ă���A�\���͈́i�r���[�|�[�g�j�ƕ\���T�C�Y���w��ł���悤�ɂȂ��Ă��܂��B
�@viewBox�����̒l�Ƃ��ẮA4�̐��l�����ŋL�q���܂��B���ꂼ��\���͈͂̍����X/Y���W�A���A�����ł��B������width�Aheight�����ł��̗̈��HTML��ɕ\������T�C�Y���`���܂��B�����̑����𗘗p���A�L�����o�X����(5,5)-(15,15)�̗̈���c��10�{�Ɋg�債�ĕ\���������ȉ��Ɏ����܂��B
�@viewBox�Ŏw�肵���\���͈͂�width�Aheight�����̃A�X�y�N�g�䂪�قȂ�ꍇ�A�f�t�H���g�ł̓A�X�y�N�g����ێ����Ȃ���\���͈͂����ׂČ�����悤�ɃX�P�[�����O���A�������ĕ\�����܂��B���̋�����ύX����̂�preserveAspectRatio�����ł��B�����l�Ƃ��Ă�none�A��������x[Min|Mid|Max]Y[Min|Mid|Max]���w��ł��܂��Bnone�̏ꍇ�̓A�X�y�N�g��������viewBox���\���T�C�Y�Ƀt�B�b�g����悤�ɕό`���܂��B���̑��̏ꍇ�AX/Y�������ꂼ��ɂ��č��܂��͏�iMin�j�A�����iMid�j�A�E�܂��͉��iMax�j���w�肵�܂��B�ȉ���none�ƉE���̗�ł��B
�@�����ċŋ����meet��������slice���w��ł��܂��B�O�҂�viewBox�S�̂��\�������悤�ɁA��҂͕\���̈�S�̂�viewBox�������悤�ɃX�P�[�����O���܂��B���������āA�O�҂ł�viewBox�̊O�̗̈悪�\�������\��������A��҂ł�viewBox�̈ꕔ����\���ɂȂ�\��������܂��B
�@�ȏオSVG�̊�{�I�ȋL�q���@�����HTML�ł̕\�����@�ł��B���̃y�[�W�����svg�^�O���ɋL�q����}�`���̃^�O�̏����������Ă����܂��B
Copyright © ITmedia, Inc. All Rights Reserved.