10���ł킩��SVG ��b���FWeb�O���t�B�b�N���n�b�N����i2�j�i1/5 �y�[�W�j

�m���ē�����AWeb�u���E�U��ŗ��p�ł���O���t�B�b�N�֘A�Z�p�BHTML�̂悤�Ȋ��o�Ő}�`���`��ł���uSVG�v���n�b�N���悤

» 2012�N06��01�� 00��00�� ���J
[�ɓ�����CWebOS Goodies]

SVG�h�L�������g�̏�����

�@�{�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

���@XML�Ńx�N�g���O���t�B�b�N�X���L�q����SVG

�@����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

���@SVG�h�L�������g�̍\��

�@�܂��ŏ��Ɂ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

���@HTML�ł̕\�����@

�@�쐬����SVG�摜�͒P�Ƃŕ\�����邱�Ƃ��ł��܂����A�����̏ꍇ��HTML�y�[�W�̈ꕔ�Ƃ��ĕ\���������Ƃ���ł��傤�BSVG��HTML���ŕ\������ɂ́A3�‚̕��@������܂��B

  • object�^�O��p����
  • img�^�O��CSS��p����
  • (X)HTML�ɒ��ږ��ߍ���

�@���ꂼ��ɕʂ̗��_�Ɛ��񂪂���̂Ł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

���@�\���T�C�Y�ƃX�P�[�����O

�@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

viewBoxAwidthAheight̊TO viewBox�Awidth�Aheight�����̊T�O

�@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

viewBoxwidthAheightw肵 viewBox��width�Aheight���w�肵�����@���ۂ̃T���v��������

�@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

preserveAspectRatiǒ(1) preserveAspectRatio�̌���(1)�@���ۂ̃T���v��������

�@�����ċ󔒂ŋ�؂���meet��������slice���w��ł��܂��B�O�҂�viewBox�S�̂��\�������悤�ɁA��҂͕\���̈�S�̂�viewBox�������悤�ɃX�P�[�����O���܂��B���������āA�O�҂ł�viewBox�̊O�̗̈悪�\�������”\��������A��҂ł�viewBox�̈ꕔ����\���ɂȂ�”\��������܂��B

preserveAspectRatiǒ(2) preserveAspectRatio�̌���(2)�@���ۂ̃T���v��������

�@�ȏオSVG�̊�{�I�ȋL�q���@�����HTML�ł̕\�����@�ł��B���̃y�[�W�����svg�^�O���ɋL�q����}�`���̃^�O�̏����������Ă����܂��B

�@�@�@�@�@�@ 1|2|3|4|5 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B