<svg version="1.1" viewBox="0 130 860 560" fill="none" xmlns="http://www.w3.org/2000/svg">
	<defs>
  	<style>
      rect { stroke-width: 1 ; stroke: #000}
		  .graph { stroke-width: 2; stroke-dasharray: 8,6; fill-opacity: 0.2}
			.graph-label {font-family: serif ; font-style: italic }
			line, .arcs { stroke: #000 ; stroke-width: 2; marker-end: url(#arrow) }
  		text { fill: #000; font-size: 12 ; font-family: sans-serif }
			.credential > rect { fill: #dab}
			.credential-proof > rect { fill: #bda}
			.claim > rect { fill: #fe9}
		  #background {stroke: none; fill: #fff; width:100%;height:100%}
  	</style>
		<marker id="arrow" viewBox="0 0 6 4" refX="6" refY="2" fill="#000"
      markerWidth="6" markerHeight="4" orient="auto">
    <path d="M0 0v4l6 -2z" />
    </marker>
	</defs>

<rect id="background"/>

<g><title>A credential and its proof</title>
<!-- see also credential.svg -->
<desc>A credential presented schematically. There are two major components:
  the credential itself, and its proof.

The credential includes metadata, including a date of issue and an issuer, and a claim,
in this case that "Pat" is an alumnus of "Example University"
(which is also the issuer of the credential).

The proof of the credential is a signature, with a nonce, date, the algorithm used,
and a public key belonging to the creator, Example University.
</desc>
  <g class="credential"><title>資格証明グラフ</title>
	  <text class="graph-label" x="660" y="155">資格証明グラフ</text>
	  <rect x="40" y="160" rx="20" width="780" height="260" class="graph"/>

			<rect x="350" y="260" rx="80" width="160"  ry="25" height="45"/>
		    <text x="385" y="290">Credential 123</text>

		  <line x1="350" y1="282" x2="250" y2="282" />
		  	<text x="265" y="265">issuanceDate</text>
		    <rect x="60" y="265" width="190" height="40" />
		      <text x="80" y="290">2010-01-01T19:37.24Z</text>

      <line x1="425" y1="260" x2="425" y2="215" />
	  	  <text x="435" y="245">type</text>
        <rect x="330" y="175" width="190" height="40" />
    	  	<text x="370" y="200">AlumniCredential</text>

					<line x1="510" y1="282" x2="670" y2="282" />
		    		<text x="500" y="260">credentialSubject</text>

		      	<g class="claim">
					  <rect x="630" y="260" width="180" height="155" class="graph" rx="15"/>
						<text x="750" y="255" class="graph-label">Claim</text>
							<rect x="670" y="265" width="100" height="40" rx="50" ry="20"/>
				      <text x="710" y="290">Pat</text>
		      		<line x1="720" y1="305" x2="720" y2="365"/>
			        	<text x="730" y="335">AlumniOf</text>
		        		<rect x="640" y="365" width="160" height="40"/>
			      	  <text x="655" y="390" fill="#000">Example University</text>
			      </g>

      <line x1="425" y1="305" x2="425" y2="360" />
  			<text x="435" y="330">issuer</text>
				<rect x="340" y="360" rx="90" width="180"  ry="25" height="45"/>
					<text x="400" y="380">Example
						<tspan x="395" dy="15">University</tspan></text><!-- credential issuer -->
			</g>

	<line x1="425" y1="420" x2="425" y2="510" />
  	<text x="435" y="455">proof</text>

    <g class="credential-proof"><title>資格証明証明グラフ</title>
      <text class="graph-label" x="640" y="460">資格証明証明グラフ</text>
      <rect x="40" y="465" rx="20" width="780" height="205" class="graph"/>

		<rect x="350" y="510" width="160" height="45" rx="80" ry="25" />
		  <text x="385" y="535">Signature 456</text>

			<path class="arcs" d="m375 516c0 0 -4 -9 -33 -15c0 0 -2 -3 -30 -4c-6 0 -13 -1 -25 -1h-30"/>
			<text x="280" y="490">type</text>
		<rect x="65" y="480" height="40" width="190" />
		  <text x="90" y="505">RsaSignature2018</text>

			<path class="arcs" d="m375 550c0 0 -4 9 -33 15c0 0 -2 3 -30 4c-6 0 -13 1 -25 1h-30"/>
			<text x="280" y="585">created</text>
			<rect x="65" y="550" width="190" height="40" />
			<text x="85" y="575">2017-06-18T21:19:10Z</text>

			<path class="arcs" d="m490 518c0 0 4 -9 33 -15c0 0 2 -3 30 -4c6 0 13 -1 25 -1h30"/>
			<text x="535" y="490">nonce</text>
			<rect x="610" y="480" width="170" height="40"/>
			<text x="630" y="505">34dj239dsj328</text>

			<path class="arcs" d="m490 550c0 0 4 9 33 15c0 0 2 3 30 4c6 0 13 1 25 1h30"/>
		    <text x="485" y="590">signatureValue</text>
		    <rect x="610" y="550" width="170" height="40"/>
		      <text x="630" y="575">BavE110...3JT24=</text>

    <line x1="425" y1="555" x2="425" y2="620" />
		<text x="370" y="600">creator</text>
			<rect x="340" y="620" rx="90" width="180"  ry="25" height="45"/>
			  <text x="368" y="642">Example University
			    <tspan x="390" dy="16">Public Key 7</tspan></text>
		</g>

</g>

</svg>