SVG�̊�{�I�ȗv�f: text�v�f(����2)

2002�N3��17��(��)�X�V


��SVG�̊�{�I�ȗv�f: text�v�f(����2)

������: �܂��͓��{��e�L�X�g��\�������Ă݂悤�ˁB�ǂ�����΂����Ǝv��?

�����: �����B���{��̃t�H���g���w�肷��΂����̂�����?

������: ���������B���̂悤�ɂ���΂����񂾂�B�T���v���̃��X�g���ڂ��Ă������ˁB

�����

  • MS ����: MS-Mincho
  • MS P����: MS-PMincho
  • MS �S�V�b�N: MS-Gothic
  • MS P�S�V�b�N: MS-PGothic
SVG�h�L�������g�@�T���v��(���{��e�L�X�g�̕\��)

?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="350" xmlns="http://www.w3.org/2000/svg">

  <desc>text element</desc>

  <desc>Example text02 - 'Hello' in blue</desc>

  <text x="200" y="40" font-family="Arial" font-size="14" >font-family="MS-Mincho"</text>
  <text x="20" y="80"
    font-family="MS-Mincho" font-size="40" fill="green" >
    ����͓��{��ł�
  </text>

  <text x="200" y="120" font-family="Arial" font-size="14" >font-family="MS-PMincho"</text>
  <text x="20" y="160"
    font-family="MS-PMincho" font-size="40" fill="navy" >
    ����͓��{��ł�
  </text>

  <text x="200" y="200" font-family="Arial" font-size="14" >font-family="MS-Gothic"</text>
  <text x="20" y="240"
    font-family="MS-Gothic" font-size="40" fill="green" >
    ����͓��{��ł�
  </text>

  <text x="200" y="290" font-family="Arial" font-size="14" >font-family="MS-PGothic"</text>
  <text x="20" y="330"
    font-family="MS-PGothic" font-size="40" fill="navy" >
    ����͓��{��ł�
  </text>

</svg>

������: �����"text_2.svg"�Ƃ������O�̃t�@�C���ɂ��āA"text_2.html"���烊���N���ĕ\��������Ǝ��̐}�̂悤�ɂȂ�ˁB
�����A���������B����"text_2.svg"��ۑ�����Ƃ��ɂ́A�����R�[�h��"UTF-8"�ɂ��Ă����āB���{��̕����������Ă��邩��B

�����: �����A�����Ȃ񂾂��B

text�v�f�̃T���v���t�@�C�� text_2.html
viewport�̃T�C�Y�́A400px�~350px�ł��B

��Adobe�Ђ�SVG Viewer���C���X�g�[������Ă���Ɖ��̃C���[�W�̂悤�ɕ\�������͂��ł��B

Adobe�Ђ�SVG Viewer���C���X�g�[������Ă���Ƃ��̂悤�ɕ\�������͂��ł��B


�����{��e�L�X�g�̏c����

�����: ���{�ꂪ�\���ł���񂾂�����A�c������������˂��`�B�B�B�B (^ ^*

������: �����A�ł���񂾂�B����́A"writing-mode"�Ƃ����������w�肷�邱�Ƃłł���񂾂�B�‚��łɊ֘A�̑����ɂ‚��Đ}�ɍڂ��Ă������ˁB

�����

text�v�f�̊e�����̈Ӗ�(2)

text�v�f�̊e�����̈Ӗ�(3)

�����: �����Ȃ񂩂�������̂ˁB�c�����ł��邵�E�E�E

������: ���Ⴀ�B�T���v�����ڂ��Ă������ˁB�����A���X�g�����āB

�����: �����B

������


��text�v�f�̃T���v��(3): �c����

SVG�h�L�������g�@�T���v��(���{��e�L�X�g�̏c����)

<?xml version="1.0" standalone="yes" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

  <desc>text element</desc>

  <desc>Example text03 - poem</desc>

  <text x="340" y="20"
       font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
�t�߂���
  </text>

  <text x="260" y="40"
      font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
�ė���炵<tspan fill="green">���}</tspan>��
  </text>

  <text x="280" y="190"
      font-family="MS-Mincho" font-size="16" fill="navy" writing-mode="tb" >
���낽��
  </text>

  <text x="180" y="40"
      font-family="MS-Mincho" font-size="30" fill="navy" writing-mode="tb" >
�ߊ�������V��<tspan fill="green">����R</tspan>
  </text>
  <text x="200" y="260"
      font-family="MS-Mincho" font-size="16" fill="navy" writing-mode="tb" >
��<tspan dy="10">��</tspan><tspan dy="6">���</tspan>
  </text>

  <text x="100" y="240"
      font-family="MS-Mincho" font-size="24" writing-mode="tb" >
�����V�c
  </text>
  <text x="118" y="248"
      font-family="MS-Mincho" font-size="12" fill="navy" writing-mode="tb" >
��<tspan dy="5">�Ƃ��Ă�̂�</tspan>
  </text>

</svg>

�����: ����B���̉̂ˁB�B�B�B�Ƃ���ŁAtspan���ĂȂ���?

������: �����A�������Btspan���Ă����̂́Atext�v�f�̎q�v�f�Ƃ��Ďg����񂾂��ǁA���̌��̕����t�H���g��ύX������A�����̐F��ύX������A�ʒu�����炵���肷��Ƃ��Ɏg���񂾂�B

�����: �����Ȃ񂾂��B

������: tspan�̎�ȑ�����}�ɍڂ��Ă������ˁB

tspan�v�f�̊e����

������: ���Ⴀ�A�������̃e�L�X�g�𕶎��R�[�h��"UTF-8"��"text_3.svg"�Ƃ������O�̃t�@�C���ɂ��āA"text_3.html"���烊���N���ĕ\��������Ǝ��̐}�̂悤�ɂȂ�ˁB

text�v�f�̃T���v���t�@�C�� text_3.html
viewport�̃T�C�Y�́A400px�~400px�ł��B

��Adobe�Ђ�SVG Viewer���C���X�g�[������Ă���Ɖ��̃C���[�W�̂悤�ɕ\�������͂��ł��B

Adobe�Ђ�SVG Viewer���C���X�g�[������Ă���Ƃ��̂悤�ɕ\�������͂��ł��B

�����: �Ȃ��Ȃ�����炵����������̂ˁB���ꂵ����Btspan�ŁA���}�E����R�̕����̐F��"green"�ɂ��Ă���̂ˁB����ƁA���r�̂Ƃ���̕����̈ʒu��tspan��dy�����ł��炵�Ă���̂ˁB

tspan�̎g�p��

������: ���������B����������ʂ�̂��Ƃ�������Ǝv������A��{�I�ȂƂ���͍���ł����܂��ɂ��悤�ˁB

�����: ����ꂳ�܁B���肪�ƁB

���񂩂�͂����������p�I�Ȃ��Ƃ��w�т܂��傤�B .... (^ ^*


���⑫: "text_2.html"��"text_3.html"�t�@�C���̓��e�͎��̂悤�ł��B

"text_2.html"�t�@�C���̓��e

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>SVG��text�v�f�̗�(1)�ł�</title>
  </head>
  <body>
    <p>SVG��text�v�f�̗�(2)�ł��B<br />�e�v�f��font-family������F�X�ƕς��Ă��܂��B</p>
      <embed src="text_2.svg" name="SVGEmbed" width="400" height="350" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>

"text_3.html"�t�@�C���̓��e

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>SVG��text�v�f�̗�(3)�ł�</title>
  </head>
  <body>
    <p>���t�̗̂�ł��B</p>
      <embed src="text_2.svg" name="SVGEmbed" width="400" height="400" type="image/svg-xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

  </body>
</html>