{"id":17756935,"url":"https://github.com/graphieros/svg-annotator-v3","last_synced_at":"2026-01-29T09:41:10.794Z","repository":{"id":65142950,"uuid":"583364920","full_name":"graphieros/svg-annotator-v3","owner":"graphieros","description":"A Vue3 svg annotator to comment and print any wrapped content","archived":false,"fork":false,"pushed_at":"2022-12-29T15:12:10.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-14T17:55:58.229Z","etag":null,"topics":["annotator","svg","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-29T15:02:34.000Z","updated_at":"2022-12-29T15:05:19.000Z","dependencies_parsed_at":"2022-12-31T21:40:50.432Z","dependency_job_id":null,"html_url":"https://github.com/graphieros/svg-annotator-v3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/graphieros/svg-annotator-v3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-annotator-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-annotator-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-annotator-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-annotator-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/svg-annotator-v3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fsvg-annotator-v3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28874233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T07:35:32.468Z","status":"ssl_error","status_checked_at":"2026-01-29T07:33:31.463Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotator","svg","vue3"],"created_at":"2024-10-26T16:10:45.403Z","updated_at":"2026-01-29T09:41:10.774Z","avatar_url":"https://github.com/graphieros.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-annotator\nA Vue3 component you can use to wrap any content to enable on-the-go annotations and pdf generation.\n\nFeatures:\n. create shapes (rectangle, circle, arrow)\n. freehand drawing\n. add text (includes bullet points mode)\n. select, move, resize, copy paste, delete shapes\n. select and group shapes in one single action\n. save to pdf (uses html2canvas \u0026 jspdf as dependencies)\n\n## Project setup\n```\nnpm i svg-annotator-v3\n```\n\n## Implementation\n```\nimport SvgAnnotator from \"svg-annotator-v3\";\n```\n\nYou need to place a single element inside the SvgAnnotator (div, section, svg or canvas), as the SvgAnnotator will base its size upon the first slotted element. This element and all its children will be part of the annotation area.\n\nIf your content contains multiple elements, place them inside a single div, section, svg or canvas element:\n\n```\n\u003cSvgAnnotator\u003e\n    \u003cdiv\u003e\n        ... any content you want\n    \u003c/div\u003e\n\u003c/SvgAnnotator\u003e\n\n\u003cSvgAnnotator\u003e\n    \u003csection\u003e\n        ... any content you want\n    \u003c/section\u003e\n\u003c/SvgAnnotator\u003e\n\n\u003cSvgAnnotator\u003e\n    \u003csvg\u003e\n        ... any content you want\n    \u003c/svg\u003e\n\u003c/SvgAnnotator\u003e\n\n\u003cSvgAnnotator\u003e\n    \u003ccanvas\u003e\n    \u003c/canvas\u003e\n\u003c/SvgAnnotator\u003e\n\n```\n\n## Props\n```\n   fixedTools: {\n      // if true, toolbox will be fixed to top center of your page. \n      // Ideal to use when a whole page is slotted inside the SvgAnnotator.\n      type: Boolean,\n      default: false,\n    },\n    fontFamily: {\n      // The font family your slotted elements are using. \n      // In print mode, all fonts will be converted to Helvetica, so you need to provide your font here, to revert to it after print is resumed.\n      type: String,\n      default: \"Helvetica\",\n    },\n    hideWhenFolded: {\n      // Hide annotations when the toolbox is closed.\n      type: Boolean,\n      default: false,\n    },\n    showPrint: {\n      // Show the print button in the toolbox\n      type: Boolean,\n      default: false,\n    },\n    showTooltips: {\n      // Show tooltips for top buttons of toolbox\n      type: Boolean,\n      default: true,\n    },\n    translations: {\n      // Translations for all labels used in the toolbox\n      type: Object,\n      default() {\n        return {\n          color: \"Color\",\n          colorAlpha: \"Color alpha\",\n          dashedLines: \"Dashed lines\",\n          filled: \"Filled\",\n          fontSize: \"Font size\",\n          thickness: \"Thickness\",\n          title: \"Annotations\",\n          tooltipGroup: \"Select \u0026 group\",\n          tooltipDelete: \"Delete\",\n          tooltipMove: \"Move\",\n          tooltipResize: \"Resize\",\n          tooltipBringToFront: \"Bring to front\",\n          tooltipBringToBack: \"Bring to back\",\n          tooltipDuplicate: \"Duplicate\",\n          tooltipUndo: \"Undo last shape\",\n          tooltipPdf: \"Save pdf\"\n        };\n      },\n    },\n```\n\n## Caveats\n\n- Moving a shape too quickly can make the pointer leave the current shape and focus on another shape.\u003cbr\u003e\n- While the menu is open, the drawing area is above the content that was placed in the slot. User interaction with the slotted content is not possible, as all interactions will concern the SvgAnnotator.\u003cbr\u003e\n- When the menu is closed, the slotted content pops back to the top layer, to restore user interaction to your content. However, all annotations will appear below your content. You can set the prop 'hideWhenFolded' to true to hide annotations when the menu is closed.\u003cbr\u003e\n- During the pdf generation, all fonts will be converted to 'Helvetica', which is one of the default fonts supported by jspdf. Not providing your font in the prop 'fontFamily' will cause content to remain with 'Helvetica' after the pdf generation resumes.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fsvg-annotator-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fsvg-annotator-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fsvg-annotator-v3/lists"}