<svg version="1.1" viewBox="0 0 1160 1135" fill="none" xmlns="http://www.w3.org/2000/svg">
	<style><![CDATA[
		rect,path {stroke:#000;stroke-width:1px;}
		text {fill:#000;font-size:24px;font-family:sans-serif}
		*[role=heading]{font-size:1.5em;font-weight:bold}
		#background {fill:#fff;width:100%;height:100%;stroke:none}
	]]></style>

<defs>
	<symbol id="vc-metadata">
		<rect fill="#cef" width="270" height="175"/>

		<text x="10" y="25">Context</text>
		<text x="10" y="50">Type</text>
		<text x="10" y="75">ID</text>
		<text x="10" y="100">Issuer</text>
		<text x="10" y="125">Issue Date</text>
		<text x="10" y="150">Expiration Date</text>
		<text x="20" y="170"> ...</text>

		<rect fill="#def" y="325" width="270" height="125"/>
		<text x="10" y="350">Proof:</text>
		<text x="20" y="375">Signature</text>
		<text x="20" y="400">Proof of Correctness</text>
		<text x="20" y="425">Attributes</text>
		<text x="30" y="445"> ...</text>

</symbol>

<symbol id="derived-vc-metadata">
	<!-- Template for a derived credential (one line of subject)
  To use this:

	<use href="#derived-vc-metadata" x="[XValue]" y="[YValue]"/>
  <text x="[XValue]+..." y="[YValue]+35" aria-role="heading">[Derived Credential title]</text>

	<text x="[XValue+30]" y="[YValue+205]">Credential Subject:</text>
	<text x="[XValue+40]" y="[YValue+230]">[SubjectValue]</text>

(optionally wrapped in a <g> with a comment labeling it)
 -->
	<rect fill="#bda" width="320" height="330" rx="20"/>
	<rect fill="#cef" x="20" y="45" width="280" height="130"/>

	<text x="30" y="70">Context</text>
	<text x="30" y="95">Type</text>
	<text x="30" y="120">ID</text>
	<text x="30" y="145">Issuer</text>
	<text x="30" y="170">Issue Date</text>

	<rect fill="#def" x="20" y="180" width="280" height="60"/>

	<rect fill="#def" x="20" y="250" width="280" height="60"/>
	<text x="30" y="275">Proof:</text>
	<text x="40" y="300">Knowledge of Signature</text>
</symbol>

</defs>

<rect id="background"/>

<g>
<rect fill="#bda" x="60" y="60" rx="20" width="310" height="510"/>
<text x="90" y="95" role="heading">検証可能な資格証明1</text>

<use href="#vc-metadata" x="80" y="115" />

<rect fill="#def" x="80" y="300" width="270" height="125"/>
<text x="90" y="325">Credential Subject:</text>
<text x="100" y="350">Given Name</text>
<text x="100" y="375">Family Name</text>
<text x="100" y="400">Birth Date</text>
<text x="110" y="420"> ...</text>
</g>

<g>
<rect fill="#bda" x="60" y="620" rx="20" width="310" height="510"/>
<text x="90" y="655" role="heading">検証可能な資格証明2</text>

<use href="#vc-metadata" x="80" y="675" />

<rect fill="#def" x="80" y="860" width="270" height="125"/>
<text x="90" y="885">Credential Subject:</text>
<text x="100" y="910">University</text>
<text x="110" y="935">Department</text>
<text x="120" y="960">Degree Awarded</text>
<text x="130" y="980"> ...</text>
</g>

<g><!-- Presentation -->
<rect fill="#f99" x="640" y="85" width="420" height="1000" rx="15"/>
<text x="745" y="115" role="heading">プレゼンテーション</text>

  <g><title>Presentation Metadata block</title>
  <rect fill="#fda" x="660" y="130" width="380" height="100"/>
  <text x="670" y="155">Context</text>
  <text x="670" y="180">Type</text>
  <text x="670" y="205">ID</text>
  <text x="680" y="225"> ...</text>
  </g>

  <rect fill="#fda" x="660" y="240" width="380" height="750"/>
  <text x="740" y="270" role="heading">検証可能な資格証明</text>

    <g><!-- derived credential 1 -->
    <use href="#derived-vc-metadata" x="685" y="285"/>
    <text x="765" y="320" role="heading">派生資格証明1</text>

    <text x="715" y="490">Credential Subject:</text>
    <text x="725" y="515">ageOver18</text>
    </g>

    <g><!-- derived credential 2 -->
    <use href="#derived-vc-metadata" x="685" y="630"/>
    <text x="765" y="665" role="heading">派生資格証明2</text>

    <text x="715" y="835">Credential Subject:</text>
    <text x="725" y="860">degree</text>
    </g>

  <g><!-- presentation proof -->
  <rect fill="#fda" x="660" y="1000" width="380" height="60"/>
  <text x="670" y="1025">Proof:</text>
  <text x="680" y="1050">Common Link Secret</text>
  </g>

</g>

<g><title>Derived credential information is a subset from the credentials</title>
<path d="m370 90l315 220"/>
<path stroke-dasharray="4,3" d="m200 390l520 115"/>
<path d="m370 550l315 50"/>

<path d="m370 640l315 30"/>
<path stroke-dasharray="4,3" d="m295 955l430 -100"/>
<path d="m370 1115l315 -170"/>
</g>

</svg>