-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathsvg-template.json
6 lines (6 loc) · 6.51 KB
/
svg-template.json
1
2
3
4
5
6
[
{
"id": "5b9c2a12-810a-7388-2dc8-13ee7ad88bac",
"content": "<svg width=\"350\" height=\"560\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" >\n <defs>\n <radialGradient id=\"gradient\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n <stop offset=\"0%\" style=\"stop-color:#ffffff;stop-opacity:1\" />\n <stop offset=\"100%\" style=\"stop-color:#c1e0e6;stop-opacity:1\" />\n </radialGradient>\n \n <!-- Filter for shadow -->\n <filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"0\" dy=\"0\" />\n <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"1.5\" />\n <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n </filter>\n\n <clipPath id=\"bg-roundedClip\">\n <rect x=\"0\" y=\"0\" width=\"350\" height=\"560\" rx=\"30\" ry=\"30\" />\n </clipPath>\n\n <style type=\"text/css\">\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');\n \n .titleSemiBold16 {\n font-family: 'Inter', sans-serif;\n font-weight: 600;\n font-size: 16px;\n text-anchor: middle;\n }\n\n .titleRegular15 {\n font-family: 'Inter', sans-serif;\n font-weight: 300;\n font-size: 15px;\n text-anchor: middle;\n }\n\n .fieldLabelRegular11 {\n font-family: 'Inter', sans-serif;\n font-weight: 400;\n font-size: 11px;\n text-anchor: start;\n fill: #767676;\n }\n .fieldValueFontRegular11 {\n font-family: 'Inter', sans-serif;\n font-weight: 600; /* Regular */\n font-size: 11px;\n text-anchor: start;\n fill: #000000;\n }\n .fieldValueFontWrappable {\n font-family: 'Inter', sans-serif;\n font-weight: 400; /* Regular */\n font-size: 11px;\n text-anchor: start;\n fill: #000000;\n text-wrap: wrap;\n }\n .horizontalLine {\n font-family: 'Inter', sans-serif;\n font-weight: 600; /* Semi-Bold */\n font-size: 11px;\n text-anchor: start;\n fill: #000000;\n font-weight: bold;\n word-wrap: break-word;\n }\n </style>\n \n </defs>\n <g filter=\"url(#shadow)\">\n <!-- Background Image -->\n <image preserveAspectRatio=\"xMidYMid slice\" \n width=\"350\" \n height=\"560\" \n href=\"https://raw.githubusercontent.com/tw-mosip/file-server/master/svg-templates/assets/backdrop.png\"\n clip-path=\"url(#bg-roundedClip)\"\n /> \n \n <!-- Logo and Title -->\n <g transform=\"translate(0, 10)\">\n <image xlink:href=\"https://raw.githubusercontent.com/tw-mosip/file-server/master/svg-templates/assets/stay-protected-insurance-logo.png\" width=\"40\" height=\"40\" x=\"50%\" y=\"15\" transform=\"translate(-20, 0)\" preserveAspectRatio=\"xMidYMin meet\"/>\n <text x=\"50%\" y=\"80\" class=\"titleSemiBold16\" fill=\"#000000\">\n {{credentialSubject/policyName}}\n </text>\n <text x=\"50%\" y=\"105\" class=\"titleSemiBold16\" fill=\"#000000\">\n {{credentialSubject/policyNumber}}\n </text>\n </g>\n\n <!-- Full Name -->\n <g transform=\"translate(0, 150)\">\n \n <text x=\"5%\" y=\"0\" class=\"fieldLabelRegular11\">Full Name\n </text>\n <text x=\"5%\" y=\"15\" class=\"fieldValueFontRegular11\">{{credentialSubject/fullName}}\n </text>\n \n </g>\n\n <!-- Phone number and Gender -->\n <g transform=\"translate(0, 190)\">\n\n <text x=\"5%\" y=\"0\" class=\"fieldLabelRegular11\">Phone Number\n </text>\n <text x=\"5%\" y=\"15\" class=\"fieldValueFontRegular11\">{{credentialSubject/mobile}}\n </text>\n <text x=\"60%\" y=\"0\" class=\"fieldLabelRegular11\">Gender\n </text>\n <text x=\"60%\" y=\"15\" class=\"fieldValueFontRegular11\">{{credentialSubject/gender}}\n </text>\n </g>\n\n <!-- Email -->\n <g transform=\"translate(0, 230)\">\n\n <text x=\"5%\" y=\"0\" class=\"fieldLabelRegular11\">Email\n </text>\n <text x=\"5%\" y=\"15\" width=\"50\" class=\"fieldValueFontRegular11\">{{credentialSubject/email}}\n </text>\n </g>\n\n <!-- Policy Issued , Expired On and Benefits -->\n <g transform=\"translate(0, 260)\">\n <line x1=\"5%\" y1=\"0\" x2=\"95%\" y2=\"0\" stroke=\"#a9a9a9\" stroke-width=\"0.5\" />\n <text x=\"5%\" y=\"20\" class=\"fieldLabelRegular11\">Policy Issued On\n </text>\n <text x=\"5%\" y=\"35\" class=\"fieldValueFontRegular11\">{{credentialSubject/policyIssuedOn}}\n </text>\n <text x=\"60%\" y=\"20\" class=\"fieldLabelRegular11\">Policy Expires On\n </text>\n <text x=\"60%\" y=\"35\" class=\"fieldValueFontRegular11\">{{credentialSubject/policyExpiresOn}}\n </text>\n <text x=\"5%\" y=\"60\" class=\"fieldLabelRegular11\">Benefits\n </text>\n <text x=\"5%\" y=\"65\" class=\"fieldValueFontRegular11\">\n <tspan x=\"15\" dy=\"1.2em\">{{credentialSubject/benefitsLine1}}</tspan>\n <tspan x=\"15\" dy=\"1.3em\">{{credentialSubject/benefitsLine2}}</tspan>\n </text>\n </g>\n\n <!-- Status section with path -->\n <g transform=\"translate(0, 365)\">\n <!-- Horizontal Line -->\n <line x1=\"5%\" y1=\"0\" x2=\"95%\" y2=\"0\" stroke=\"#a9a9a9\" stroke-width=\"0.5\" />\n \n <!-- Row with Image, Path, and Status -->\n <g transform=\"translate(0, 30)\">\n <!-- White border with padding -->\n <rect x=\"7%\" y=\"0\" width=\"120\" height=\"120\" fill=\"#ffffff\" stroke=\"#ffffff\" stroke-width=\"20\" rx=\"5\" ry=\"5\" filter=\"url(#shadow)\" />\n \n <image xlink:href=\"{{credentialSubject/qrCodeImage}}\" width=\"120\" height=\"120\" x=\"7%\" y=\"0\" preserveAspectRatio=\"xMidYMin meet\" />\n \n <!-- Status Label and Value -->\n <text x=\"70%\" y=\"55\" class=\"titleSemiBold16\" fill=\"#767676\">\n Status\n </text>\n <text x=\"75%\" y=\"78\" class=\"titleSemiBold16\" fill=\"#000000\">\n Valid\n </text>\n <!-- Tick Mark -->\n <path d=\"M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM9.29,16.29L5.7,12.7c-0.39,-0.39 -0.39,-1.02 0,-1.41 0.39,-0.39 1.02,-0.39 1.41,0L10,14.17l6.88,-6.88c0.39,-0.39 1.02,-0.39 1.41,0 0.39,0.39 0.39,1.02 0,1.41l-7.59,7.59c-0.38,0.39 -1.02,0.39 -1.41,0z\" fill=\"#239E00\" transform=\"translate(215, 60)\" />\n </g>\n </g>\n </g>\n <!-- Border Rectangle -->\n <rect x=\"0\" y=\"0\" width=\"350\" height=\"560\" fill=\"none\" filter=\"url(#shadow)\" rx=\"30\" ry=\"30\" stroke=\"#a9a9a9\" stroke-width=\"0.5\" />\n</svg>\n"
}
]