{"id":19799,"date":"2023-05-23T12:02:31","date_gmt":"2023-05-23T10:02:31","guid":{"rendered":"https:\/\/www.smartrace.de\/?page_id=19799"},"modified":"2023-10-18T11:47:41","modified_gmt":"2023-10-18T09:47:41","slug":"add-your-own-track-as-svg","status":"publish","type":"page","link":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/","title":{"rendered":"Add your own track as SVG"},"content":{"rendered":"\n

Add your own track as SVG<\/h1>\n\n\n\n

Why should I do that?<\/h3>\n\n\n\n

Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a graphical track plan to visualize which driver holds the best time in which sector. The sectors are colored in the respective controller color.<\/p>\n\n\n\n

\"\"\n
Best sector times widget with color highlighting.<\/figcaption>\n<\/figure>\n\n\n\n

Create your own SVG<\/h3>\n\n\n
<\/a>
\n\n

<\/path><\/svg><\/span>Did you know?<\/strong> SmartRace user Lukas K. has created an editor that allows you to easily recreate your track and export it as SVG. You can find the editor here<\/a>.<\/span><\/p>\n\n<\/div><\/div>\n\n\n

SmartRace comes with a default track plan that is displayed if no plan has been stored for a track. To create your own track plan, you can use any vector capable graphics program (e.g. CorelDraw, Adobe Illustrator, Gimp, etc.). You can also try to convert any existing track plan into SVG using an online tool.<\/p>\n\n\n\n

If you save your track plan as SVG (Scalable Vector Graphic) with the program of your choice, you will get a SVG file that you can open with any text or code editor. The result should look something like the following example.<\/p>\n\n\n\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xml:space=\"preserve\" version=\"1.1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 27022.15 12023.11\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n    <g>\n        <path style=\"fill:none;stroke:#555;stroke-width:1200;\" id=\"sector_1\" d=\"M14630.56 11457.61c-24113,1218.71 -10944.78,-18474.44 -6823.7,-7725.05 942.09,2457.35 3621.74,2267.86 6220.47,2468.92\"\/>\n        <path style=\"fill:none;stroke:#555;stroke-width:1200;\" id=\"sector_2\" d=\"M14327.62 6221.87c6364.11,465.81 5438.96,-4189.4 1689.62,-4578.96 -2252.81,-234.07 -6392.57,-437.79 -8883.14,491.27 -4693.56,1750.86 -3129.45,6917.21 4104.5,6874.64\"\/>\n        <path style=\"fill:none;stroke:#555;stroke-width:1200;\" id=\"sector_3\" d=\"M11594.94 9007.46c1239.41,-4.3 7415.13,617.18 8942.55,-2062.82 844.98,-1482.59 951.85,-4707.77 2577.79,-4845.51 3762.61,-318.73 5388.85,8816.57 -403.08,9244.74 -3138.09,231.98 -5668.08,141.25 -7724.78,141.25\"\/>\n    <\/g>\n<\/svg><\/code><\/pre>\n\n\n\n
In order for your SVG file to be displayed correctly in SmartRace and for the sectors to be highlighted, you need to keep the following in mind:<\/p>\n\n\n\n
    \n
  1. Create the sectors as individual (not connected) elements. In the SVG source code there must be as many path<\/strong> elements as there are sectors on your track.<\/li>\n\n\n\n
  2. Each path<\/strong> element for each sector must have an attribute “id” which has as content sector_<number>. So the path element for sector 1 must have sector_1 as id, and so on.<\/li>\n\n\n\n
  3. Do not use external CSS styles, only inline styles. SmartRace uses stroke<\/strong> to color the sectors, not fill<\/strong>.<\/li>\n\n\n\n
  4. Add the finished SVG code in SmartRace to the track database of your track.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a graphical track plan to visualize which driver holds the best time in which sector. The sectors are colored in the respective controller color. Create your … <\/p>\n
    Read full article<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":20683,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"manual.php","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":{"0":"post-19799","1":"page","2":"type-page","3":"status-publish","5":"infinite-scroll-item"},"acf":[],"yoast_head":"\nAdd your own track as SVG - SmartRace for Carrera Digital<\/title>\n<meta name=\"description\" content=\"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add your own track as SVG - SmartRace for Carrera Digital\" \/>\n<meta property=\"og:description\" content=\"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"SmartRace for Carrera Digital\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/smartraceapp\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-18T09:47:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.smartrace.de\/wp-content\/uploads\/2023\/05\/Bildschirmfoto-2023-05-22-um-18.17.38.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@smartrace\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/\",\"name\":\"Add your own track as SVG - SmartRace for Carrera Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bildschirmfoto-2023-05-22-um-18.17.38.png\",\"datePublished\":\"2023-05-23T10:02:31+00:00\",\"dateModified\":\"2023-10-18T09:47:41+00:00\",\"description\":\"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bildschirmfoto-2023-05-22-um-18.17.38.png\",\"contentUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bildschirmfoto-2023-05-22-um-18.17.38.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/add-your-own-track-as-svg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Manual\",\"item\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tips & Tricks\",\"item\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/tipps-tricks\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Add your own track as SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#website\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/\",\"name\":\"SmartRace for Carrera Digital\",\"description\":\"The Nr. 1-App for carrera digital slot racing\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.smartrace.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#organization\",\"name\":\"SmartRace f\u00fcr Carrera Digital\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/Heller-Hintergrund-1.png\",\"contentUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/Heller-Hintergrund-1.png\",\"width\":1233,\"height\":1266,\"caption\":\"SmartRace f\u00fcr Carrera Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/smartraceapp\",\"https:\\\/\\\/x.com\\\/smartrace\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UChWBm_cFDXFe8Id2966bdMA\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add your own track as SVG - SmartRace for Carrera Digital","description":"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/","og_locale":"en_US","og_type":"article","og_title":"Add your own track as SVG - SmartRace for Carrera Digital","og_description":"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a","og_url":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/","og_site_name":"SmartRace for Carrera Digital","article_publisher":"http:\/\/facebook.com\/smartraceapp","article_modified_time":"2023-10-18T09:47:41+00:00","og_image":[{"url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2023\/05\/Bildschirmfoto-2023-05-22-um-18.17.38.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@smartrace","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/","url":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/","name":"Add your own track as SVG - SmartRace for Carrera Digital","isPartOf":{"@id":"https:\/\/www.smartrace.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/#primaryimage"},"image":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2023\/05\/Bildschirmfoto-2023-05-22-um-18.17.38.png","datePublished":"2023-05-23T10:02:31+00:00","dateModified":"2023-10-18T09:47:41+00:00","description":"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a","breadcrumb":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/#primaryimage","url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2023\/05\/Bildschirmfoto-2023-05-22-um-18.17.38.png","contentUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2023\/05\/Bildschirmfoto-2023-05-22-um-18.17.38.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/add-your-own-track-as-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.smartrace.de\/en\/"},{"@type":"ListItem","position":2,"name":"User Manual","item":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/"},{"@type":"ListItem","position":3,"name":"Tips & Tricks","item":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/tipps-tricks\/"},{"@type":"ListItem","position":4,"name":"Add your own track as SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.smartrace.de\/#website","url":"https:\/\/www.smartrace.de\/","name":"SmartRace for Carrera Digital","description":"The Nr. 1-App for carrera digital slot racing","publisher":{"@id":"https:\/\/www.smartrace.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.smartrace.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.smartrace.de\/#organization","name":"SmartRace f\u00fcr Carrera Digital","url":"https:\/\/www.smartrace.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.smartrace.de\/#\/schema\/logo\/image\/","url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2018\/01\/Heller-Hintergrund-1.png","contentUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2018\/01\/Heller-Hintergrund-1.png","width":1233,"height":1266,"caption":"SmartRace f\u00fcr Carrera Digital"},"image":{"@id":"https:\/\/www.smartrace.de\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/smartraceapp","https:\/\/x.com\/smartrace","https:\/\/www.youtube.com\/channel\/UChWBm_cFDXFe8Id2966bdMA"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"SmartRace","author_link":"https:\/\/www.smartrace.de\/en\/author\/trademarc_design\/"},"uagb_comment_info":0,"uagb_excerpt":"Add your own track as SVG Why should I do that? Since SmartRace 5.7 there is a new widget for the race screen: Best Sector Times. This widget displays a graphical track plan to visualize which driver holds the best time in which sector. The sectors are colored in the respective controller color. Create your…","_links":{"self":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/19799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/comments?post=19799"}],"version-history":[{"count":4,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/19799\/revisions"}],"predecessor-version":[{"id":20148,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/19799\/revisions\/20148"}],"up":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/20683"}],"wp:attachment":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/media?parent=19799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}