{"id":36998732,"url":"https://github.com/thebitbang/php-svg-framework-svgf","last_synced_at":"2026-01-14T00:00:49.467Z","repository":{"id":43730980,"uuid":"94685633","full_name":"TheBitBang/php-svg-framework-SVGF","owner":"TheBitBang","description":"SVGF (Scalable Vector Graphics Framework) is a PHP library for creating and modifying SVG files.","archived":false,"fork":false,"pushed_at":"2021-09-22T12:14:09.000Z","size":222,"stargazers_count":30,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-22T03:30:27.451Z","etag":null,"topics":["align-svg-elements","css","dom","framework","functions-svgutils","php","php-library","php-svg","svg","svgf","xpath"],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/the-bit-bang/php-svg-framework-svgf","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheBitBang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-18T12:24:30.000Z","updated_at":"2025-03-24T21:06:45.000Z","dependencies_parsed_at":"2022-09-14T11:12:41.597Z","dependency_job_id":null,"html_url":"https://github.com/TheBitBang/php-svg-framework-SVGF","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/TheBitBang/php-svg-framework-SVGF","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheBitBang%2Fphp-svg-framework-SVGF","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheBitBang%2Fphp-svg-framework-SVGF/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheBitBang%2Fphp-svg-framework-SVGF/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheBitBang%2Fphp-svg-framework-SVGF/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheBitBang","download_url":"https://codeload.github.com/TheBitBang/php-svg-framework-SVGF/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheBitBang%2Fphp-svg-framework-SVGF/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28406466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"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":["align-svg-elements","css","dom","framework","functions-svgutils","php","php-library","php-svg","svg","svgf","xpath"],"created_at":"2026-01-14T00:00:27.931Z","updated_at":"2026-01-14T00:00:49.424Z","avatar_url":"https://github.com/TheBitBang.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVGF: SVG Framework for PHP\r\n\r\n**SVGF** (Scalable Vector Graphics Framework) is a PHP library for creating and modifying SVG files.\r\n\r\nIt is composed of: \r\n* A PHP implementation of the [Scalable Vector Graphics (SVG) 1.1](https://www.w3.org/TR/SVG/Overview.html) specification.\r\n* A PHP implementation of the [Document Object Model (DOM) Level 2 Style Specification](https://www.w3.org/TR/DOM-Level-2-Style/).\r\n* Additional functionality for the SVG element manipulation.\r\n\r\n## Extended functionality\r\n\r\nThese are the main functionalities provided by **SVGF**:\r\n\r\n* Read and write SVG files.\r\n* Programatically modify the attributes of the elements in compliance with the (SVG) 1.1 specification.\r\n* Programatically modify the style attribute in compliance with the (DOM) Level 2 Style Specification.\r\n* Access SVG elements using XPath.\r\n* Programatically create SVG basic shapes.\r\n* Programatically create SVG texts.\r\n* Programatically align SVG elements.\r\n* Draw preset connectors between points and elements\r\n\r\n## Usage\r\n\r\n### Create SVG files\r\n\r\n#### Create SVG with size A4 (portrait orientation)\r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = new SVGSVGElement($dom_doc_svg);\r\n$svg_svg-\u003esetWidth('210mm');\r\n$svg_svg-\u003esetHeight('297mm');\r\n$svg_svg-\u003esetViewBox('0 0 210 270');\r\n$svg_svg-\u003esetVersion('1.1');\r\n$svg_svg-\u003esetAttribute('xmlns','http://www.w3.org/2000/svg');\r\n```\r\n\r\n#### Create SVG with size A4 using SVGF (portrait orientation)\r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = SVGFElement::svg($dom_doc_svg,'a4',SVGFElement::SIZE_A4,'portrait');\r\n```\r\n\r\n#### Create SVG with size A4 using SVGF (landscape orientation)\r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = SVGFElement::svg($dom_doc_svg,'a4');\r\n```\r\n\r\nor\r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = SVGFElement::svg($dom_doc_svg,'a4',SVGFElement::SIZE_A4,'landscape');\r\n```\r\n\r\n#### Create SVG with size Full HD\r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = new SVGSVGElement($dom_doc_svg);\r\n$svg_svg-\u003esetWidth('1920px');\r\n$svg_svg-\u003esetHeight('1080px');\r\n$svg_svg-\u003esetViewBox('0 0 1920 1080');\r\n$svg_svg-\u003esetVersion('1.1');\r\n$svg_svg-\u003esetAttribute('xmlns','http://www.w3.org/2000/svg');\t\r\n```\r\n\r\n#### Create SVG with size Full HD using SVGF \r\n\r\n```php\r\n$dom_doc_svg = new \\DOMDocument('1.0', 'utf-8');\r\n$svg_svg = SVGFElement::svg($dom_doc_svg,'a4',SVGFElement::SIZE_FHD);\r\n```\r\n\r\n#### SVGF predefined sizes\r\n\r\n* A0, A1, A2, A3, A4, A5\r\n* ARCH_A, ARCH_B, ARCH_C, ARCH_D, ARCH_E\r\n* ICON_16X16, ICON_32X32, ICON_48X48\r\n* VGA, SVGA, XGA, HD, FHD, QHD, UHD, 8K\r\n\r\n### Read existing SVG files\r\n\r\n```php\r\n$path_to_file = './file_name.svg';\r\n$dom_doc_svg = SVGFImportFromSVG::getSVGFromFile($path_to_file);\r\n```\r\n\r\n### Create basic shapes\r\n\r\n#### Create rectangle using methods\r\n\r\n```php\r\n$svg_rect = new SVGRectElement($dom_doc_svg);\r\n$svg_rect-\u003esetId('rect_50x50_1');\r\n$svg_rect-\u003esetX('0');\r\n$svg_rect-\u003esetY('0');\r\n$svg_rect-\u003esetWidth('50');\r\n$svg_rect-\u003esetHeight('50');\r\n$svg_rect-\u003esetRx('5');\r\n$svg_rect-\u003esetRy('5');\r\n$svg_svg-\u003eappendChild($svg_rect);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/rect_50x50_1.svg\"\u003e\r\n\r\n#### Create rectangle setting values\r\n\r\n```php\r\n$svg_rect = new SVGRectElement($dom_doc_svg);\r\n$svg_rect-\u003eid = 'rect_50x50_2';\r\n$svg_rect-\u003ex = '0';\r\n$svg_rect-\u003ey = '0';\r\n$svg_rect-\u003ewidth = '50';\r\n$svg_rect-\u003eheight = '50';\r\n$svg_rect-\u003erx = '10';\r\n$svg_rect-\u003ery = '10';\r\n$svg_svg-\u003eappendChild($svg_rect);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/rect_50x50_2.svg\"\u003e\r\n\r\n#### Create rectangle using SVGF\r\n\r\n```php\r\n$svg_rect = SVGFElement::rect($dom_doc_svg,'50','50','rect_50x50_3');\r\n$svg_svg-\u003eappendChild($svg_rect);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/rect_50x50_3.svg\"\u003e\r\n\r\n#### Create circle using methods\r\n\r\n```php\r\n$svg_circle = new SVGCircleElement($dom_doc_svg);\r\n$svg_circle-\u003esetId('circle_10');\r\n$svg_circle-\u003esetCx(25);\r\n$svg_circle-\u003esetCy(25);\r\n$svg_circle-\u003esetR(10);\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_10.svg\"\u003e\r\n\r\n#### Create circle setting values\r\n\r\n```php\r\n$svg_circle = new SVGCircleElement($dom_doc_svg);\r\n$svg_circle-\u003eid = 'circle_15';\r\n$svg_circle-\u003ecx = 25;\r\n$svg_circle-\u003ecy = 25;\r\n$svg_circle-\u003er = 15;\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_15.svg\"\u003e\r\n\r\n#### Create circle using SVGF\r\n\r\n```php\r\n// create circle\r\n$svg_circle = SVGFElement::circle($dom_doc_svg,'20','circle_20','25','25');\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_20.svg\"\u003e\r\n\r\n### Apply style\r\n\r\n#### Apply style setting individual properties\r\n\r\n```php\r\n$svg_circle = SVGFElement::circle($dom_doc_svg,10,'circle_10_style',25,25);\r\n$svg_circle-\u003estyle-\u003esetProperty('fill','#d9737a','');\r\n$svg_circle-\u003estyle-\u003esetProperty('stroke','#861a22','');\r\n$svg_circle-\u003estyle-\u003esetProperty('stroke-width','2','');\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_10_style.svg\"\u003e\r\n\r\n#### Apply style setting style as string with properties and values\r\n\r\n```php\r\n$svg_circle = SVGFElement::circle($dom_doc_svg,15,'circle_15_style',25,25);\r\n$svg_circle-\u003estyle = \"fill: #d9737a; stroke: #861a22; stroke-width: 2;\";\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_15_style.svg\"\u003e\r\n\r\n#### Apply style from SVGF\r\n\r\n```php\r\n$svg_circle = SVGFElement::circle($dom_doc_svg,20,'circle_20_style',25,25,'#d9737a','#861a22',2);\r\n$svg_svg-\u003eappendChild($svg_circle);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/circle_20_style.svg\"\u003e\r\n\r\n### Align SVG elements\r\n\r\nSource svg file used to illustrate align functionalities:\r\n\r\n```xml\r\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\r\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"150px\" height=\"100px\" viewBox=\"0 0 150 100\" version=\"1.1\"\u003e\r\n\t\u003crect width=\"50\" height=\"50\" x=\"50\" y=\"25\" id=\"rect_0\" style=\"fill: #d9737a; \"/\u003e\r\n\t\u003crect width=\"30\" height=\"30\" x=\"15\" y=\"35\" id=\"rect_1\" style=\"fill: #d9737a; stroke: #1a867e; stroke-width: 4; stroke-dasharray: 8 2; \"/\u003e\r\n\t\u003crect width=\"20\" height=\"20\" x=\"115\" y=\"40\" id=\"rect_2\" style=\"fill: #861a22; \"/\u003e\r\n\u003c/svg\u003e\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_source_file.svg\"\u003e\r\n\r\n#### Align to center\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_center.svg\"\u003e\r\n\r\n#### Align to center with offset\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER,20,0);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER,0,-10);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_center_offset.svg\"\u003e\r\n\r\n#### Align to sides\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::ALIGN_BOTTOM);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_RIGHT);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_1.svg\"\u003e\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::ALIGN_LEFT);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_TOP);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_2.svg\"\u003e\r\n\r\n#### Position on sides\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::POSITION_LEFT);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::POSITION_TOP);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_position_1.svg\"\u003e\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::POSITION_RIGHT);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::POSITION_RIGHT);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_1,SVGFObjectBox::POSITION_BOTTOM);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_position_2.svg\"\u003e\r\n\r\n#### Position on sides with offset\r\n\r\n```php\r\n$svg_rect_1 = SVGFAlign::align($svg_rect_1,$svg_rect_0,SVGFObjectBox::POSITION_LEFT,-5);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::ALIGN_CENTER);\r\n$svg_rect_2 = SVGFAlign::align($svg_rect_2,$svg_rect_0,SVGFObjectBox::POSITION_TOP,0,-5);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/align_position_offset.svg\"\u003e\r\n\r\n### Access SVG elements using XPath\r\n\r\nSource svg file used to illustrate xpath functionalities:\r\n\r\n```xml\r\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\r\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"150px\" height=\"100px\" viewBox=\"0 0 150 100\" version=\"1.1\"\u003e\r\n\t\u003ccircle r=\"15\" id=\"circle_2\" cx=\"75\" cy=\"25\" style=\"fill: #861a22; \"/\u003e\r\n\t\u003cg\u003e\r\n\t\t\u003ccircle r=\"10\" id=\"circle_1\" cx=\"25\" cy=\"25\"/\u003e\r\n\t\t\u003ccircle r=\"20\" id=\"circle_3\" cx=\"125\" cy=\"25\" style=\"fill: #d9737a; stroke: #861a22; stroke-width: 2; \"/\u003e\r\n\t\t\u003crect width=\"30\" height=\"30\" x=\"60\" y=\"60\" id=\"rect_2\" style=\"fill: #861a22; \"/\u003e\r\n\t\u003c/g\u003e\r\n\t\u003crect width=\"40\" height=\"40\" x=\"5\" y=\"55\" id=\"rect_1\" style=\"fill: #d9737a; stroke: #861a22; stroke-width: 2; \"/\u003e\r\n\t\u003crect width=\"20\" height=\"20\" x=\"115\" y=\"65\" id=\"rect_3\"/\u003e\r\n\u003c/svg\u003e\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_source_file.svg\"\u003e\r\n\r\nTo get the DOM representation:\r\n\r\n```php\r\n$xpath = new \\DOMXPath($dom_doc_svg);\r\n```\r\n\r\n#### Select elements by id\r\n\r\n```php\r\n// Change fill color of the elements rect_1 and circle_2 to #1a867e \r\n$matches = $xpath-\u003equery(\"//*[@id='rect_1'] | //*[@id='circle_2']\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003estyle-\u003esetProperty('fill','#1a867e','');\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_elements_by_id.svg\"\u003e\r\n\r\n#### Select elements by tag name\r\n\r\n```php\r\n// Change fill color of circle elements to #1a867e. Move them 25px down and 20px to the right\r\n$matches = $xpath-\u003equery(\"//circle\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003estyle-\u003esetProperty('fill','#1a867e','');\r\n\t$match-\u003ecy = $match-\u003ecy + 25;\r\n\t$match-\u003ecx = $match-\u003ecx + 20;\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_elements_by_tag_name.svg\"\u003e\r\n\r\n#### Select child elements\r\n\r\n```php\r\n// Change fill color of the g child elements to #1a867e\r\n$matches = $xpath-\u003equery(\"//g/*\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003estyle-\u003esetProperty('fill','#1a867e','');\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_children.svg\"\u003e\r\n\r\n#### Select elements by attribute value\r\n\r\n```php\r\n// Create a corner radius of 15px in rect_1\r\n$matches = $xpath-\u003equery(\"//rect[@id='rect_1']\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003erx = 15;\r\n\t$match-\u003ery = 15;\t\r\n}\r\n\r\n// Create a corner radius of 5px in rect_2\r\n$matches = $xpath-\u003equery(\"//rect[@id='rect_2']\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003erx = 5;\r\n\t$match-\u003ery = 5;\r\n}\r\n\r\n// Change fill color of rect elements with rx \u003c 10 (or not set) to #1a867e.\r\n$matches = $xpath-\u003equery(\"//rect[@rx\u003c10] | rect[not(@rx)]\");\r\nforeach ($matches as $match) {\r\n\t$match-\u003estyle-\u003esetProperty('fill','#1a867e','');\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_elements_by_attribute_value.svg\"\u003e\r\n\r\n#### Select elements by style setting\r\n\r\n```php\r\n// Create border for elements with fill #861a22.\r\n$matches = $xpath-\u003equery(\"//*\");\r\nforeach ($matches as $match) {\r\n\t$fill = $match-\u003estyle-\u003egetPropertyValue('fill');\r\n\tif ($fill == '#861a22') {\r\n\t\t$match-\u003estyle-\u003esetProperty('stroke','#1a867e','');\r\n\t\t$match-\u003estyle-\u003esetProperty('stroke-width',5,'');\r\n\t}\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_elements_by_style_setting.svg\"\u003e\r\n\r\n#### Select parent element\r\n\r\n```php\r\n// Create style for parent of rect_2 (the style settings will be overriden if they are definied in the child element).\r\n$matches = $xpath-\u003equery(\"//rect[@id='rect_2']\");\r\nforeach ($matches as $match) {\r\n\t$parent_svg = $match-\u003eparentNode;\r\n\t$parent_svg-\u003estyle = 'stroke:#d9737a; stroke-width: 5; stroke-dasharray: 10 5; fill:#1a867e';\r\n}\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/xpath_select_parent.svg\"\u003e\r\n\r\n### Create texts\r\n\r\n#### Create text\r\n\r\n```php\r\n$svg_text = new SVGTextElement($dom_doc_svg);\r\n$svg_text-\u003enodeValue = 'Hello World!';\r\n$svg_text-\u003eid = 'text_hello';\r\n$svg_text-\u003ex = 0;\r\n$svg_text-\u003ey = 20;\r\n$svg_svg-\u003eappendChild($svg_text);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_1.svg\"\u003e\r\n\r\n#### Create text using SVGF\r\n\r\n```php\r\n$svg_text = SVGFElement::text($dom_doc_svg,'Hello World!','text_hello','0','20');\r\n$svg_svg-\u003eappendChild($svg_text);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_2.svg\"\u003e\r\n\r\n#### Create text with style properties\r\n\r\n```php\r\n$svg_text = new SVGTextElement($dom_doc_svg);\r\n$svg_text-\u003enodeValue = 'Hello World!';\r\n$svg_text-\u003eid = 'text_hello';\r\n$svg_text-\u003ex = 0;\r\n$svg_text-\u003ey = 20;\r\n$svg_text-\u003estyle-\u003esetProperty('font-family','Helvetica','');\r\n$svg_text-\u003estyle-\u003esetProperty('font-size','16px','');\r\n$svg_text-\u003estyle-\u003esetProperty('font-weight','bold','');\r\n$svg_text-\u003estyle-\u003esetProperty('fill','#d9737a','');\r\n$svg_svg-\u003eappendChild($svg_text);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_style_1.svg\"\u003e\r\n\r\n#### Create text with style properties using SVGF\r\n\r\n```php\r\n$svg_text = SVGFElement::text($dom_doc_svg,'Hello World!','text_hello','0','20','Helvetica','25px','normal','#861a22');\r\n$svg_svg-\u003eappendChild($svg_text);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_style_2.svg\"\u003e\r\n\r\n### Align texts using SVGF\r\n\r\n**Note**: The file containing the TrueType font must be located in the same folder\r\n\r\n#### Align texts to edges of element\r\n\r\n```php\r\n$svg_text_0 = SVGFAlign::align($svg_text_0,$svg_rect,SVGFObjectBox::ALIGN_CENTER); // 'CENTERED' 10px\r\n$svg_text_1 = SVGFAlign::align($svg_text_1,$svg_rect,SVGFObjectBox::ALIGN_LEFT); // 'On top and left aligned' 16px\r\n$svg_text_1 = SVGFAlign::align($svg_text_1,$svg_rect,SVGFObjectBox::POSITION_TOP);\r\n$svg_text_2 = SVGFAlign::align($svg_text_2,$svg_rect,SVGFObjectBox::ALIGN_RIGHT); // 'Aligned with bottom-right corner' 10px\r\n$svg_text_2 = SVGFAlign::align($svg_text_2,$svg_rect,SVGFObjectBox::ALIGN_BOTTOM);\r\n$svg_text_3 = SVGFAlign::align($svg_text_3,$svg_rect,SVGFObjectBox::POSITION_BOTTOM); // 'Below and to the right' 14px\r\n$svg_text_3 = SVGFAlign::align($svg_text_3,$svg_rect,SVGFObjectBox::POSITION_RIGHT);\r\n$svg_text_4 = SVGFAlign::align($svg_text_4,$svg_rect,SVGFObjectBox::POSITION_LEFT); // 'To the left' 24px (y=50)\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_align.svg\"\u003e\r\n\r\n#### Align texts with offset\r\n\r\n```php\r\n$svg_text_0 = SVGFAlign::align($svg_text_0,$svg_rect,SVGFObjectBox::ALIGN_CENTER); // 'offset top' 8px\r\n$svg_text_0 = SVGFAlign::align($svg_text_0,$svg_rect,SVGFObjectBox::POSITION_TOP,0,-10);\r\n$svg_text_1 = SVGFAlign::align($svg_text_1,$svg_rect,SVGFObjectBox::ALIGN_CENTER); // 'offset right' 16px\r\n$svg_text_1 = SVGFAlign::align($svg_text_1,$svg_rect,SVGFObjectBox::POSITION_RIGHT,20);\r\n$svg_text_2 = SVGFAlign::align($svg_text_2,$svg_rect,SVGFObjectBox::ALIGN_CENTER,-5,20); // 'offset center' 10px\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/text_align_offset.svg\"\u003e\r\n\r\n### Draw connectors\r\n\r\nSource php code to create the markers used to illustrate connectors:\r\n\r\n```php\r\n// create defs\r\n$svg_defs = SVGFElement::defs($dom_doc_svg,'marker');\r\n\r\n// create markers\r\n$svg_marker_arrow_start = SVGFMarker::markerArrowStart($dom_doc_svg,'marker_arrow_start','path_arrow_start','#861a22');\r\n$svg_marker_arrow_end = SVGFMarker::markerArrowEnd($dom_doc_svg,'marker_arrow_end','path_arrow_end','#861a22');\r\n$svg_marker_cicrle = SVGFMarker::markerCircle($dom_doc_svg,'marker_circle','circle','#861a22');\r\n\r\n$svg_defs-\u003eappendChild($svg_marker_arrow_start);\r\n$svg_defs-\u003eappendChild($svg_marker_arrow_end);\r\n$svg_defs-\u003eappendChild($svg_marker_cicrle);\r\n\r\n$svg_svg-\u003eappendChild($svg_defs);\r\n```\r\n\r\n#### Draw connectors between points\r\n\r\n```php\r\n// create points\r\n$point_start_1 = SVGFElement::point(10,10);\r\n$point_end_1 = SVGFElement::point(40,40);\r\n\r\n$point_start_2 = SVGFElement::point(60,40);\r\n$point_end_2 = SVGFElement::point(90,10);\r\n\r\n$point_start_3 = SVGFElement::point(125,40);\r\n$point_end_3 = SVGFElement::point(125,10);\r\n\r\n$point_start_4 = SVGFElement::point(160,25);\r\n$point_end_4 = SVGFElement::point(190,25);\r\n\r\n// create connectors\r\n$svg_connector_1 = SVGFConnector::points($dom_doc_svg,$point_start_1,$point_end_1,'#861a22','1px','connector_1','marker_circle','marker_arrow_end');\r\n$svg_connector_2 = SVGFConnector::points($dom_doc_svg,$point_start_2,$point_end_2,'#861a22','1px','connector_2','marker_arrow_start','marker_arrow_end');\r\n$svg_connector_3 = SVGFConnector::points($dom_doc_svg,$point_start_3,$point_end_3,'#861a22','1px','connector_3','marker_arrow_end','marker_arrow_end');\r\n$svg_connector_4 = SVGFConnector::points($dom_doc_svg,$point_start_4,$point_end_4,'#861a22','1px','connector_4',null,'marker_circle');\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_points.svg\"\u003e\r\n\r\n#### Draw connectors of different stroke widths between points\r\n\r\nThe marker size will automatically adjust to the stroke size of the path\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::points($dom_doc_svg,$point_start_1,$point_end_1,'#861a22','0.5px','connector_1','marker_circle','marker_arrow_end');\r\n$svg_connector_2 = SVGFConnector::points($dom_doc_svg,$point_start_2,$point_end_2,'#861a22','2px','connector_2','marker_arrow_start','marker_arrow_end');\r\n$svg_connector_3 = SVGFConnector::points($dom_doc_svg,$point_start_3,$point_end_3,'#861a22','1.5px','connector_3','marker_arrow_end','marker_arrow_end');\r\n$svg_connector_4 = SVGFConnector::points($dom_doc_svg,$point_start_4,$point_end_4,'#861a22','3px','connector_4',null,'marker_circle');\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_points_stroke_width.svg\"\u003e\r\n\r\n#### Draw connectors between element centers\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::centers($dom_doc_svg,$svg_circle,$svg_rect,'#861a22','1px','connector_1',null,'marker_arrow_end');\r\n$svg_connector_2 = SVGFConnector::centers($dom_doc_svg,$svg_rect,$svg_text,'#861a22','1px','connector_2',null,'marker_arrow_end');\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_center.svg\"\u003e\r\n\r\n#### Draw connectors between elements borders\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::borders($dom_doc_svg,$svg_rect_left,$svg_rect_top,'#861a22','1px','connector_1',null,'marker_arrow_end');\r\n$svg_connector_2 = SVGFConnector::borders($dom_doc_svg,$svg_rect_right,$svg_rect_left,'#861a22','1px','connector_2',null,'marker_arrow_end');\r\n$svg_connector_3 = SVGFConnector::borders($dom_doc_svg,$svg_circle,$svg_rect_right,'#861a22','1px','connector_3',null,'marker_arrow_end');\r\n$svg_connector_4 = SVGFConnector::borders($dom_doc_svg,$svg_rect_top,$svg_circle,'#861a22','1px','connector_4',null,'marker_arrow_end');\r\n$svg_connector_5 = SVGFConnector::borders($dom_doc_svg,$svg_text,$svg_rect_top,'#861a22','1px','connector_5',null,'marker_arrow_end');\r\n$svg_connector_6 = SVGFConnector::borders($dom_doc_svg,$svg_circle,$svg_text,'#861a22','1px','connector_6',null,'marker_arrow_end');\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_border.svg\"\u003e\r\n\r\n#### Draw connectors between elements borders with offset\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::borders($dom_doc_svg,$svg_rect_left,$svg_rect_top,'#861a22','1px','connector_1',null,'marker_arrow_end',-5);\r\n$svg_connector_2 = SVGFConnector::borders($dom_doc_svg,$svg_rect_right,$svg_rect_left,'#861a22','1px','connector_2',null,'marker_arrow_end',15);\r\n$svg_connector_3 = SVGFConnector::borders($dom_doc_svg,$svg_circle,$svg_rect_right,'#861a22','1px','connector_3',null,'marker_arrow_end',-5);\r\n$svg_connector_4 = SVGFConnector::borders($dom_doc_svg,$svg_rect_top,$svg_circle,'#861a22','1px','connector_4',null,'marker_arrow_end',15);\r\n$svg_connector_5 = SVGFConnector::borders($dom_doc_svg,$svg_text,$svg_rect_top,'#861a22','1px','connector_5',null,'marker_arrow_end',5);\r\n$svg_connector_6 = SVGFConnector::borders($dom_doc_svg,$svg_circle,$svg_text,'#861a22','1px','connector_6',null,'marker_arrow_end',5);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_border_offset.svg\"\u003e\r\n\r\n#### Draw connectors between elements sides\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::sides($dom_doc_svg,$svg_rect_left_bottom,$svg_rect_left,'connector_1','#861a22');\r\n$svg_connector_2 = SVGFConnector::sides($dom_doc_svg,$svg_rect_left_top,$svg_rect_left_bottom,'connector_2','#861a22');\r\n$svg_connector_3 = SVGFConnector::sides($dom_doc_svg,$svg_rect_right_bottom,$svg_rect_right_top,'connector_3','#861a22');\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_sides.svg\"\u003e\r\n\r\n#### Draw connectors between elements sides with offset\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::sides($dom_doc_svg,$svg_rect_left_bottom,$svg_rect_left,'connector_1','#861a22',2);\r\n$svg_connector_2 = SVGFConnector::sides($dom_doc_svg,$svg_rect_left_top,$svg_rect_left_bottom,'connector_2','#861a22',2);\r\n$svg_connector_3 = SVGFConnector::sides($dom_doc_svg,$svg_rect_right_bottom,$svg_rect_right_top,'connector_3','#861a22',2);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_sides_offset.svg\"\u003e\r\n\r\n#### Draw connectors between text sides with offset\r\n\r\n```php\r\n$svg_connector_1 = SVGFConnector::sides($dom_doc_svg,$svg_text_left_top,$svg_text_left_middle,'connector_1','#d9737a',2);\r\n$svg_connector_2 = SVGFConnector::sides($dom_doc_svg,$svg_text_left_middle,$svg_text_left_bottom,'connector_2','#d9737a',2);\r\n$svg_connector_3 = SVGFConnector::sides($dom_doc_svg,$svg_text_right_top,$svg_text_right_middle,'connector_3','#d9737a',2);\r\n$svg_connector_4 = SVGFConnector::sides($dom_doc_svg,$svg_text_right_middle,$svg_text_right_bottom,'connector_4','#d9737a',2);\r\n```\r\n\r\n\u003cimg src=\"./examples/readme/connect_elements_sides_text_offset.svg\"\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebitbang%2Fphp-svg-framework-svgf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebitbang%2Fphp-svg-framework-svgf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebitbang%2Fphp-svg-framework-svgf/lists"}